SDK del reproductor de IVS: integración de Video.js - Amazon IVS
IntroducciónEventosErroresComplementosPolíticas de seguridad del contenidoFuncionescurrentTimeeliminarduracióngetIVSEventsgetIVSPlayercargajugarplaybackRatebuscable

SDK del reproductor de IVS: integración de Video.js

Este documento describe las funciones más importantes disponibles en el reproductor Video.js de Amazon Interactive Video Service (IVS).

Versión más reciente de la integración del reproductor Video.js: 1.36.0 (Notas de la versión)

Introducción

La compatibilidad con Amazon IVS para Video.js se implementa a través de la tecnología de Video.js. Proporcionamos soporte a través de etiquetas de script, así como a través de un módulo npm. Amazon IVS admite Video.js 7.6.6 y versiones 7.* más recientes, así como 8*.

Tenga en cuenta que, al crear una instancia del reproductor, la opción de fuentes de Video.js no es compatible. En su lugar, cree una instancia del reproductor normalmente y llame a la función src() de Video.js. Si la reproducción automática está habilitada, la transmisión comenzará a reproducirse; de lo contrario, use play() para iniciar la reproducción.

Demostración

La siguiente demostración en directo muestra cómo utilizar la integración con Video.js con etiquetas de script de nuestra red de entrega de contenido: Integración de Video.js con el reproductor de Amazon IVS.

Configuración con la etiqueta de script

Para configurar la tecnología de Amazon IVS a través de la etiqueta de script:

  1. Incluya la siguiente etiqueta (para la última versión de la integración del reproductor).

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

  2. Registre la tecnología mediante la función registerIVSTech:

    registerIVSTech(videojs);

    donde videojs es el objeto proporcionado por Video.js.

  3. Al crear una instancia del reproductor, agregue AmazonIVS como su primera tecnología en la opción techOrder.

Al crear una instancia del reproductor, la opción de fuentes de Video.js no es compatible. En su lugar, para establecer la fuente, cree una instancia del reproductor normalmente y, a continuación, llame a la función src() de Video.js. Si la reproducción automática está habilitada, la transmisión comenzará a reproducirse; de lo contrario, use play() para iniciar la reproducción.

Código de muestra

En este ejemplo, PLAYBACK_URL es la transmisión de origen que desea cargar. En el ejemplo se utiliza la última versión del reproductor de 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.36.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>

Configuración con NPM

Cómo utilizar el reproductor de Amazon IVS mediante npm:

  1. Instale el paquete npm del Video.js o asegúrese de que su proyecto tenga algún otro acceso a la biblioteca de Video.js.

  2. Instalación del paquete npm de amazon-ivs-player:

    npm install amazon-ivs-player

  3. Cuando esté listo para registrar la tecnología de Amazon IVS, importe la función de registerIVSTech:

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

  4. Registre la tecnología mediante la función registerIVSTech:

    registerIVSTech(videojs, options);

    donde:

    • videojs es el objeto proporcionado por Video.js.

    • options son las opciones para la capa tecnológica de Amazon IVS. Las opciones admitidas son:

      • wasmWorker: la URL en la que el archivo amazon-ivs-wasmworker.min.js está alojado.

      • wasmBinary: la URL en la que el archivo amazon-ivs-wasmworker.min.wasm está alojado.

      Los archivos de trabajo están en su carpeta node_modules/ como amazon-ivs-player/dist/. Necesita alojarlos, para usar el reproductor de IVS.

  5. Al crear una instancia del reproductor, agregue AmazonIVS como su primera tecnología en la opción techOrder:

    const player = videojs('videojs-player', {
    techOrder: ["AmazonIVS"]
});

TypeScript

Si está utilizando TypeScript, nuestro paquete npm incluye los siguientes tipos que quizás desee importar y usar.

  • VideoJSEvents, que describe la estructura que devuelve getIVSEvents().

  • VideoJSIVSTech, que describe la interfaz de una instancia del reproductor que utiliza la tecnología AmazonIVS. Puede vincularse con el tipo de VideoJsPlayer presente en el paquete npm de @types/video.js.

  • TechOptions, que describe la interfaz que define las opciones de configuración que puede enviar a registerIVSTech().

Para obtener más información sobre estos tipos, consulte la Reproductor de Amazon IVS SDK: referencia Web.

Eventos

Para escuchar eventos estándar de Video.js, utilice la función Activado del reproductor de Video.js.

Para escuchar eventos específicos de Amazon IVS, agregue y elimine agentes de escucha de eventos en el reproductor web de Amazon IVS:

player.getIVSPlayer().addEventListener(event, callback);
player.getIVSPlayer().removeEventListener(event, callback);

donde callback es una devolución de llamada que define y event es uno de los siguientes: PlayerEventType o PlayerState. Para obtener más información acerca de los eventos, consulte el Reproductor de Amazon IVS SDK: referencia Web.

Errores

Para errores generales de Video.js, escuche el evento genérico error en el reproductor:

player.on("error", callback);

Para errores específicos de Amazon IVS, escuche en el reproductor de Amazon IVS sus propios errores:

let playerEvent = player.getIVSEvents().PlayerEventType;
player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback);

La devolución de llamada recibirá un objeto con los siguientes campos:

Campo Descripción

type

Tipo de error Corresponde con los eventos ErrorType. Para obtener más información, consulte Reproductor de Amazon IVS SDK: referencia web.

code

 Código de error

source

 Fuente del error

message

 Mensaje de error legible por humanos.

Complementos

Proporcionamos un complemento que crea un conmutador de interfaz de usuario para las cualidades disponibles. Para utilizar este complemento, se debe cargar al incluir el archivo amazon-ivs-quality-plugin.min.js si utiliza nuestra tecnología a través de la siguiente etiqueta script (para la última versión del reproductor de IVS): 

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

Si utiliza npm, importe el archivo registerIVSQualityPlugin desde el módulo amazon-ivs-player:

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

A continuación, una vez que cree una instancia de su reproductor de Video.js, se requieren las siguientes llamadas para registrarlo y habilitarlo:

registerIVSQualityPlugin(videojs); // where videojs is the video.js variable
player.enableIVSQualityPlugin(); // where player is the instance of the videojs player

Esto creará un botón de menú de interfaz de usuario que le permitirá seleccionar una calidad para la transmisión.

Complementos y TypeScript

Si utiliza TypeScript, nuestro paquete npm incluye el tipo VideoJSQualityPlugin que es posible que desee importar y usar con nuestro complemento. Los complementos esencialmente son mixins, por lo que esta interfaz de tipo se debe usar como un tipo de intersección con la interfaz de TypeScript VideoJSIVSTech.

Políticas de seguridad del contenido

La API de Video.js de Amazon IVS está configurada para funcionar en páginas que utilizan Políticas de seguridad del contenido (CSP). Consulte la sección “Trabajar con la política de seguridad de contenido” en la SDK del reproductor de IVS: guía para la Web.

Funciones

Reproducción

La API de Video.js de Amazon IVS admite las interfaces necesarias para el uso interno del marco de Video.js. Es probable que la aplicación del cliente no necesite utilizar estos métodos directamente, ya que Video.js realiza la integración necesaria y presenta una interfaz estándar. Sin embargo, si es necesario, una forma de acceder a los métodos internos del reproductor de Video.js y Amazon IVS consiste en utilizar el objeto del reproductor de Video.js a fin de obtener el identificador de objeto necesario para la tecnología.

Para acceder a la API, recupere la instancia de su reproductor de Video.js como lo haría normalmente:

let player = videojs("videoTagId"); //replace videoTagId with your <video> tag’s id

Luego puede llamar a las funciones en esa instancia.

A continuación, se muestra el subconjunto de funciones de Video.js que reemplaza la capa técnica de Amazon IVS. Para obtener una lista completa de las funciones de Video.js, consulte la Documentación de la API de video.js.

Función Descripción e información específica de Amazon IVS

currentTime

Obtiene o establece el tiempo (en segundos desde el principio).

Amazon IVS: no recomendamos configurar la hora actual para las transmisiones en directo.

eliminar

Elimina la instancia del reproductor

Amazon IVS: esto también elimina el backend tecnológico de Amazon IVS.

duración

Devuelve la duración del video, en segundos.

Amazon IVS: para las transmisiones en directo, devuelve Infinity.

carga

Comienza a cargar los datos src().

Amazon IVS: esto no presenta opciones.

jugar

Reproduce la secuencia que se configuró a través de la llamada src.

Amazon IVS: si se pausó una transmisión en directo, esto reproducirá la transmisión en directo desde los últimos fotogramas, en lugar de continuar desde donde estaba en pausa.

playbackRate

Obtiene o establece la velocidad de reproducción de video. 1.0 significa velocidad normal; 0.5, media velocidad normal; 2.0, dos veces la velocidad normal; y así sucesivamente.

Amazon IVS: en una transmisión en directo, una función Get devuelve 1 y se ignora un conjunto.

buscable

Devuelve los TimeRanges de los medios que se pueden buscar.

Amazon IVS: para transmisiones en directo, llamar a end(0) entre los valores (TimeRange) devuelve Infinity (Infinito).

Específico de Amazon IVS

La tecnología de Video.js de Amazon IVS tiene funciones adicionales para acceder a comportamientos específicos de las características de Amazon IVS:

Función Descripción

getIVSPlayer

Devuelve la instancia subyacente del reproductor de Amazon IVS. La API web completa del reproductor de Amazon IVS está disponible a través de esta instancia. Se recomienda utilizar la API básica de reproducción de Video.js tanto como sea posible y utilizar esta función solo para acceder a las características específicas de Amazon IVS. Las funciones más comunes a las que probablemente deba acceder en la instancia del reproductor de Amazon IVS son setQuality() y addEventListener() o removeEventListener().

getIVSEvents

Devuelve un objeto que contiene enumeraciones específicas de Amazon IVS. Esto se utiliza para escuchar errores específicos de Amazon IVS. Para obtener más información, consulte Eventos y Errores.

currentTime

Obtiene o establece el tiempo (en segundos desde el principio).

Amazon IVS: no recomendamos configurar la hora actual para las transmisiones en directo.

Firmas

currentTime
currentTime(time)

Parámetro

Parámetro Tipo Descripción

time

número

Si time está ausente, se obtiene la hora actual. Si time está presente, se establece la reproducción de video en ese momento.

Valor de retorno

Tipo Descripción

número

La hora actual, en segundos desde el principio.

eliminar

Elimina la instancia del reproductor.

Amazon IVS: esto también elimina el backend tecnológico de Amazon IVS.

Signature

dispose()

Parámetros

Ninguna

Valor de retorno

Ninguna

duración

Devuelve la duración del video, en segundos.

Amazon IVS: para las transmisiones en directo, devuelve Infinity.

Signature

duration()

Parámetros

Ninguna

Valor de retorno

Tipo Descripción

número

La duración de la transmisión, en segundos. Para las transmisiones en directo, este valor es Infinity.

getIVSEvents

Devuelve un objeto que contiene enumeraciones específicas de Amazon IVS. Esto se utiliza para escuchar errores y eventos específicos de Amazon IVS. Para obtener más información, consulte:

Signature

getIVSEvents()

Parámetros

Ninguna

Valor de retorno

Tipo Descripción

object

Un objeto con las claves PlayerEventType, PlayerState y ErrorType, que se asignan a sus enumeraciones asociadas.

getIVSPlayer

Devuelve la instancia subyacente del reproductor de Amazon IVS. La API web completa del reproductor de Amazon IVS está disponible a través de esta instancia. Se recomienda utilizar la API básica de reproducción de Video.js tanto como sea posible y utilizar esta función solo para acceder a las características específicas de Amazon IVS. Las funciones más comunes a las que probablemente deba acceder en la instancia del reproductor de Amazon IVS son setQuality() y addEventListener() o removeEventListener().

Signature

getIVSPlayer()

Parámetros

Ninguna

Valor de retorno

Tipo Descripción

MediaPlayer

La instancia creada del reproductor.

carga

Comienza a cargar los datos src().

Amazon IVS: esto no presenta opciones.

Signature

load()

Parámetros

Ninguna

Valor de retorno

Ninguna

jugar

Reproduce la secuencia que se configuró a través de la llamada src.

Amazon IVS: si se pausó una transmisión en directo, esto reproducirá la transmisión en directo desde los últimos fotogramas, en lugar de continuar desde donde estaba en pausa.

Signature

play()

Parámetros

Ninguna

Valor de retorno

Ninguna

playbackRate

Obtiene o establece la velocidad de reproducción de video. 1.0 significa velocidad normal; 0.5, media velocidad normal; 2.0, dos veces la velocidad normal; y así sucesivamente.

Amazon IVS: en una transmisión en directo, una función Get devuelve 1 y se ignora un conjunto.

Firmas

playbackRate
playbackRate(rate)

Parámetro

Parámetro Tipo Descripción

rate

número

Velocidad de reproducción. Valores válidos: en el rango [0.25, 2.0].

Valor de retorno

Tipo Descripción

número

Velocidad de reproducción.

buscable

Devuelve los TimeRanges de los medios que se pueden buscar.

Amazon IVS: para transmisiones en directo, llamar a end(0) entre los valores (TimeRange) devuelve Infinito.

Signature

seekable()

Parámetro

Ninguna

Valor de retorno

Tipo Descripción

TimeRange

Intervalo de tiempo de los medios que están disponibles para buscar.