Kit SDK du lecteur Amazon IVS : intégration à Video.js - Amazon Interactive Video Service
DémarrageÉvénementsErreursPluginsStratégie de sécurité de contenuFonctionscurrentTimedisposerdurationgetIVSEventsgetIVSPlayerchargejouerplaybackRaterecherchable

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Kit SDK du lecteur Amazon 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.24.0 (Release Notes)

Démarrage

La prise en charge d’Amazon IVS pour Video.js est implémentée via la technologie 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* ultérieures et 8*.

Notez que lors de l’instanciation du lecteur, l’option des 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.

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).

    <script src="https://player.live-video.net/1.24.0/amazon-ivs-videojs-tech.min.js"></script>

  2. Enregistrez la technologie à l'aide de la fonction registerIVSTech :

    registerIVSTech(videojs);

    où videojs est l’objet fourni par Video.js.

  3. 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 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.

<!doctype html>
<html lang="en">
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js"></script>
    <script src="https://player.live-video.net/1.24.0/amazon-ivs-videojs-tech.min.js"></script>
</head>

<body>
    <div class="video-container">
        <video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
    </div>
    <style>
        body {
            margin: 0;
        }

        .video-container {
            width: 640px;
            height: 480px;
            margin: 15px;
        }
    </style>
    <script>
        (function play() {
            // Get playback URL from Amazon IVS API
            var PLAYBACK_URL = '';
            
            // Register Amazon IVS as playback technology for Video.js
            registerIVSTech(videojs);

            // Initialize player
            var player = videojs('amazon-ivs-videojs', {
               techOrder: ["AmazonIVS"]
            }, () => {
               console.log('Player is ready to use!');
               // Play stream
               player.src(PLAYBACK_URL);
            });
        })();
    </script>
</body>
</html>

Configuration avec NPM

Pour utiliser le lecteur Amazon IVS via npm :

  1. Installez le package npm video.js ou assurez-vous que votre projet a un autre accès à la bibliothèque Video.js.

  2. Installez le package npm amazon-ivs-player :

    npm install amazon-ivs-player

  3. Lorsque vous êtes prêt à enregistrer la technologie Amazon IVS, importez la fonction registerIVSTech :

    import { registerIVSTech } from 'amazon-ivs-player';

  4. 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.

  5. 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 souhaiterez peut-être 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é avec le type VideoJsPlayer exposé par le package npm @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.

Événements

Pour écouter les événements Video.js standards, utilisez la fonction on (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.

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.

code

 Code de l’erreur.

source

 Source de l’erreur.

message

 Message d’erreur lisible par un être humain.

Plugins

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) : 

<script src="https://player.live-video.net/1.24.0/amazon-ivs-quality-plugin.min.js"></script>

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 l'utilisez TypeScript, notre package npm inclut le VideoJSQualityPlugin type que vous souhaiterez peut-être 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 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 Amazon IVS : guide pour le Web.

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 <video> tag’s id

Ensuite, vous pouvez lancer des fonctions sur cette instance.

Voici le sous-ensemble des fonctions Video.js que la couche technologique Amazon IVS remplace. Pour obtenir la liste complète des fonctions Video.js, consultez la documentation relative à l’API Video.js.

Fonction Description et informations spécifiques à Amazon IVS

currentTime

Obtient ou définit l’heure (en secondes depuis le début).

Amazon IVS : nous ne recommandons pas de définir l’heure actuelle pour les flux en direct.

disposer

Supprime l’instance du lecteur

Amazon IVS : cela supprime également le backend technologique Amazon IVS.

duration

Renvoie la durée de la vidéo, en secondes.

Amazon IVS : pour les flux en direct, cela renvoie Infinity.

charge

Démarre le chargement des données src().

Amazon IVS : il s’agit d’une instruction non-op.

jouer

Lit le flux qui a été configuré via l’appel src.

Amazon IVS : si un flux en direct a été mis en pause, la fonction lit le flux en direct à partir des dernières images, au lieu de continuer à le lire à partir de là où il a été mis en pause.

playbackRate

Obtient ou définit la vitesse de lecture de la vidéo. 1.0 correspond à la vitesse normale, 0,5 correspond à la moitié de la vitesse normale, 2,0 correspond à deux fois la vitesse normale, et ainsi de suite.

Amazon IVS : sur un flux en direct, une demande get renvoie 1, et une demande set est ignorée.

recherchable

Renvoie les TimeRanges des médias qui peuvent être recherchés.

Amazon IVS : pour les flux en direct, appeler end(0) sur la valeur renvoyée (TimeRange) renvoie l’infini.

Spécifiques à Amazon IVS

La technologie Amazon IVS Video.js dispose de fonctions supplémentaires pour accéder aux comportements spécifiques aux fonctions Amazon IVS :

Fonction Description

getIVSPlayer

Renvoie l’instance du lecteur Amazon IVS sous-jacente. L’API Web complète du lecteur Amazon IVS est disponible via cette instance. Nous vous recommandons d’utiliser autant que possible l’API de lecture Video.js de base et d’utiliser cette fonction uniquement pour accéder aux fonctions spécifiques d’Amazon IVS. Les fonctions les plus courantes auxquelles vous aurez probablement besoin d’accéder sur l’instance de lecteur Amazon IVS sont setQuality() et addEventListener() / removeEventListener().

getIVSEvents

Renvoie un objet contenant des enums spécifiques à Amazon IVS. Ceci est utilisé pour écouter les erreurs spécifiques à Amazon IVS. Pour plus d’informations, consultez Événements et Erreurs.

currentTime

Obtient ou définit l’heure (en secondes depuis le début).

Amazon IVS : nous ne recommandons pas de définir l’heure actuelle pour les flux en direct.

Signatures

currentTime
currentTime(time)

Paramètre

Paramètre Type Description

time

nombre

Si time est absent, obtient l’heure actuelle. Si time est présent, définit la lecture vidéo à cette durée.

Valeur renvoyée

Type Description

nombre

L’heure actuelle, en secondes depuis le début.

disposer

Supprime l’instance du lecteur.

Amazon IVS : cela supprime également le backend technologique Amazon IVS.

Signature

dispose()

Paramètres

Aucuns

Valeur renvoyée

Aucun

duration

Renvoie la durée de la vidéo, en secondes.

Amazon IVS : pour les flux en direct, cela renvoie Infinity.

Signature

duration()

Paramètres

Aucuns

Valeur renvoyée

Type Description

nombre

Durée du flux, en secondes. Pour les flux en direct, cette valeur est Infinity.

getIVSEvents

Renvoie un objet contenant des enums spécifiques à Amazon IVS. Ceci est utilisé pour écouter les erreurs et les événements spécifiques à Amazon IVS. Pour plus d’informations, consultez :

Signature

getIVSEvents()

Paramètres

Aucuns

Valeur renvoyée

Type Description

object

Objet avec les clés PlayerEventType, PlayerState, et ErrorType, qui mappent vers leurs énums associées.

getIVSPlayer

Renvoie l’instance du lecteur Amazon IVS sous-jacente. L’API Web complète du lecteur Amazon IVS est disponible via cette instance. Nous vous recommandons d’utiliser autant que possible l’API de lecture Video.js de base et d’utiliser cette fonction uniquement pour accéder aux fonctions spécifiques d’Amazon IVS. Les fonctions les plus courantes auxquelles vous aurez probablement besoin d’accéder sur l’instance de lecteur Amazon IVS sont setQuality() et addEventListener() / removeEventListener().

Signature

getIVSPlayer()

Paramètres

Aucuns

Valeur renvoyée

Type Description

MediaPlayer

Instance créée du lecteur.

charge

Démarre le chargement des données src().

Amazon IVS : il s’agit d’une instruction non-op.

Signature

load()

Paramètres

Aucuns

Valeur renvoyée

Aucun

jouer

Lit le flux qui a été configuré via l’appel src.

Amazon IVS : si un flux en direct a été mis en pause, la fonction lit le flux en direct à partir des dernières images, au lieu de continuer à le lire à partir de là où il a été mis en pause.

Signature

play()

Paramètres

Aucuns

Valeur renvoyée

Aucun

playbackRate

Obtient ou définit la vitesse de lecture de la vidéo. 1.0 correspond à la vitesse normale, 0,5 correspond à la moitié de la vitesse normale, 2,0 correspond à deux fois la vitesse normale, et ainsi de suite.

Amazon IVS : sur un flux en direct, une demande get renvoie 1, et une demande set est ignorée.

Signatures

playbackRate
playbackRate(rate)

Paramètre

Paramètre Type Description

rate

nombre

Vitesse de lecture. Valeurs valides : dans la plage [0,25, 2,0].

Valeur renvoyée

Type Description

nombre

Vitesse de lecture.

recherchable

Renvoie les TimeRanges des médias qui peuvent être recherchés.

Amazon IVS : pour les flux en direct, appeler end(0) sur la valeur renvoyée (TimeRange) renvoie l’infini.

Signature

seekable()

Paramètre

Aucuns

Valeur renvoyée

Type Description

TimeRange

TimeRange des médias disponibles pour le rechercher.