# Kit SDK du lecteur IVS : intégration à Video.js Ce document décrit les fonctions les plus importantes disponibles dans le lecteur Video.js Amazon Interactive Video Service (IVS). **Dernière version de l’intégration du lecteur Video.js :** 1.51.0 ([Notes de mise à jour](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#apr16-26-player-web-ll)) ## Démarrage La prise en charge d’Amazon IVS pour Video.js est implémentée via la [technologie](https://videojs.com/guides/tech/) Video.js. Nous fournissons un support par le biais de balises de script ainsi que par le biais d’un module npm. Amazon IVS prend en charge Video.js versions 7.6.6 et 7\$1 ultérieures et 8\$1. Notez que lors de l’instanciation du lecteur, [l’option des sources](https://videojs.com/guides/options/#sources) Video.js n’est pas prise en charge. À la place, instanciez le lecteur normalement et lancez la fonction Video.js `src()`. Si la lecture automatique est activée, le flux démarre. Sinon, utilisez `play()` pour démarrer la lecture. ### Démonstration La démo en direct suivante montre comment utiliser l’intégration Video.js avec les identifications de script de notre réseau de diffusion de contenu : [Intégration à Video.js du lecteur Amazon IVS](https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276). ### Configuration avec la balise de script Pour configurer la technologie Amazon IVS à l’aide de la balise `script` : 1. Insérez l’identification suivante (pour la dernière version de l’intégration du lecteur). ``` ``` 1. Enregistrez la technologie à l'aide de la fonction `registerIVSTech` : ``` registerIVSTech(videojs); ``` où `videojs` est l’objet fourni par Video.js. 1. Lors de la création d’une instance du lecteur, ajoutez `AmazonIVS` en tant que première technologie dans l’option `techOrder`. Lors de l’instanciation du lecteur, [l’option des sources](https://videojs.com/guides/options/#sources) de Video.js n’est pas prise en charge. À la place, pour définir la source, instanciez le lecteur normalement, puis lancez la fonction Video.js `src()` depuis celui-ci. Si la lecture automatique est activée, le flux démarre. Sinon, utilisez `play()` pour démarrer la lecture. ### Exemple de code Dans cet exemple, `PLAYBACK_URL` est le flux source que vous souhaitez charger. Cet exemple utilise la dernière version du lecteur Amazon IVS. ```

``` ### Configuration avec NPM Pour utiliser le lecteur Amazon IVS via npm : 1. Installez le package npm [video.js](https://www.npmjs.com/package/video.js/v/7.6.6) ou assurez-vous que votre projet a un autre accès à la bibliothèque Video.js. 1. Installez le package npm `amazon-ivs-player` : ``` npm install amazon-ivs-player ``` 1. Lorsque vous êtes prêt à enregistrer la technologie Amazon IVS, importez la fonction `registerIVSTech` : ``` import { registerIVSTech } from 'amazon-ivs-player'; ``` 1. Enregistrez la technologie à l’aide de la fonction `registerIVSTech` : ``` registerIVSTech(videojs, options); ``` où : + `videojs` est l’objet fourni par Video.js. + `options` sont les options de la couche technologique Amazon IVS. Les options prises en charge sont : + `wasmWorker` : URL dans laquelle le fichier `amazon-ivs-wasmworker.min.js` est hébergé. + `wasmBinary` : URL dans laquelle le fichier `amazon-ivs-wasmworker.min.wasm` est hébergé. Les fichiers de travail se trouvent dans votre dossier `node_modules/`, sous `amazon-ivs-player/dist/`. Vous devez les héberger pour utiliser le lecteur IVS. 1. Lors de la création d’une instance du lecteur, ajoutez `AmazonIVS` en tant que première technologie dans l’option `techOrder` : ``` const player = videojs('videojs-player', { techOrder: ["AmazonIVS"] }); ``` ### TypeScript Si vous utilisez TypeScript, notre package npm inclut les types suivants que vous pouvez importer et utiliser. + `VideoJSEvents`, qui décrit la structure renvoyée par `getIVSEvents()`. + `VideoJSIVSTech`, qui décrit l’interface d’une instance de lecteur qui utilise la technologie `AmazonIVS`. Peut être [croisé](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) avec le type `VideoJsPlayer` exposé par le package npm [@types/video.js](https://www.npmjs.com/package/@types/video.js). + `TechOptions`, qui décrit l’interface définissant les options de configuration que vous pouvez envoyer à `registerIVSTech()`. Pour plus d’informations sur ces types, consultez [Lecteur Amazon IVS : références du kit SDK pour le Web](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). ## Événements Pour écouter les événements Video.js standards, utilisez la fonction [on](https://docs.videojs.com/docs/api/player.html#Methodson) (allumer) du lecteur Video.js. Pour écouter des événements spécifiques à Amazon IVS, ajoutez et supprimez des écouteurs d’événements sur le lecteur Web Amazon IVS : ``` player.getIVSPlayer().addEventListener(event, callback); player.getIVSPlayer().removeEventListener(event, callback); ``` où `callback` est un rappel que vous définissez, et `event` est soit `PlayerEventType`,soit `PlayerState`. Pour de plus amples informations sur les événements, consultez [Kit SDK du lecteur Amazon IVS : référence pour le Web](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). ## Erreurs Pour les erreurs générales de Video.js, écoutez l’événement générique `error` sur le lecteur : ``` player.on("error", callback); ``` Pour les erreurs spécifiques à Amazon IVS, écoutez le lecteur Amazon IVS : ``` let playerEvent = player.getIVSEvents().PlayerEventType; player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback); ``` Le rappel recevra un objet avec les champs suivants : | Champ | Description | | --- | --- | | `type` | Type d’erreur. Correspond à des événements `ErrorType`. Pour de plus amples informations, consultez [Kit SDK du lecteur Amazon IVS : référence pour le Web](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). | | `code` | Code de l’erreur. | | `source` | Source de l’erreur. | | `message` | Message d’erreur lisible par un être humain. | ## Plug-ins Nous fournissons un plugin qui crée un basculement d’interface utilisateur pour les qualités disponibles. Pour pouvoir être utilisé, ce plugin doit être chargé en incluant le fichier `amazon-ivs-quality-plugin.min.js` si vous utilisez notre technologie via l’identification `script` (pour la dernière version du lecteur IVS) : ``` ``` Si vous utilisez npm, importez le `registerIVSQualityPlugin` à partir du module `amazon-ivs-player` : ``` import { registerIVSQualityPlugin } from 'amazon-ivs-player'; ``` Ensuite, une fois que vous avez créé une instance de votre lecteur Video.js, les appels suivants sont requis pour l’enregistrer et l’activer : ``` registerIVSQualityPlugin(videojs); // where videojs is the video.js variable player.enableIVSQualityPlugin(); // where player is the instance of the videojs player ``` Cela crée un bouton de menu de l’interface utilisateur qui vous permet de sélectionner une qualité pour le flux. ### Plugins et TypeScript Si vous utilisez TypeScript, notre package npm inclut le type `VideoJSQualityPlugin` que vous souhaitez importer et utiliser avec notre plugin. Les plugins sont essentiellement des combinaisons, cette interface de type doit donc être utilisée comme un [type d’intersection](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) avec l’interface TypeScript `VideoJSIVSTech`. ## Stratégie de sécurité de contenu L’API Amazon IVS Video.js est configurée pour fonctionner sur les pages qui utilisent la stratégie de sécurité du contenu (CSP). Reportez-vous à la section « Utilisation de la stratégie de sécurité du contenu » dans le [Kit SDK du lecteur IVS : guide pour le Web](web-content-security-policy.md). ## Fonctions ### Lecture L’API Amazon IVS Video.js prend en charge les interfaces nécessaires pour une utilisation interne par le cadre Video.js. L’application cliente n’aura probablement pas besoin d’utiliser ces méthodes directement, puisque Video.js effectue l’intégration nécessaire et présente une interface standard. Cependant, si besoin, une façon d’accéder aux méthodes internes du lecteur Video.js et Amazon IVS consiste à utiliser l’objet du lecteur Video.js pour obtenir la référence d’objet nécessaire à la technologie. Pour accéder à l’API, récupérez l’instance de votre lecteur Video.js comme vous le feriez normalement : ``` let player = videojs("videoTagId"); //replace videoTagId with your