SDK do Amazon IVS Player: integração com Video.js - Amazon Interactive Video Service
Conceitos básicosEventosErrosPlug-insPolítica de segurança de conteúdoFunçõescurrentTimedescartardurationgetIVSEventsGetivsPlayerloadjogarTaxa de reproduçãobuscável

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

SDK do Amazon IVS Player: integração com Video.js

Este documento descreve as funções mais importantes disponíveis no player do Video.js do Amazon Interactive Video Service (IVS).

Versão mais recente da integração do player Video.js: 1.24.0 (notas de lançamento)

Conceitos básicos

O suporte do Amazon IVS para Video.js é implementado por meio de uma tecnologia do Video.js. Nós fornecemos suporte através de tags de script, bem como através de um módulo npm. O Amazon IVS é compatível com o Video.js 7.6.6 e as versões 7* e 8* posteriores.

Observe que ao instanciar o player, a opção de fontes do Video.js não é compatível. Em vez disso, instancie o player normalmente e chame a função src() do Video.js. Se a reprodução automática estiver ativada, o stream vai começar a ser reproduzido; caso contrário, use play() para iniciar a reprodução.

Demonstração

A demonstração ao vivo a seguir mostra como usar a integração do Video.js com etiquetas de script de nossa rede de distribuição de conteúdo: integração entre o Amazon IVS Player e Video.js.

Configurar com tag de script

Para configurar a tecnologia do Amazon IVS usando a tag script:

  1. Inclua a seguinte tag (para a versão mais recente da integração do player).

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

  2. Registre a tecnologia usando a função registerIVSTech:

    registerIVSTech(videojs);

    onde videojs é o objeto fornecido pelo Video.js.

  3. Ao criar uma instância do player, adicione AmazonIVS como sua primeira tecnologia na opção techOrder.

Ao instanciar o player, a opção de fontes do Video.js não é compatível. Em vez disso, para definir a origem, instancie o player normalmente e, em seguida, chame a função src() do Video.js nele. Se a reprodução automática estiver ativada, o stream vai começar a ser reproduzido; caso contrário, use play() para iniciar a reprodução.

Código de exemplo

Neste exemplo, PLAYBACK_URL é o stream de origem que você deseja carregar. O exemplo usa a versão mais recente do Player do 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>

Configurar com NPM

Para usar o Player do Amazon IVS através do npm:

  1. Instale o pacote npm do video.js ou certifique-se de que seu projeto tem algum outro acesso à biblioteca do Video.js.

  2. Instale o pacote npm do amazon-ivs-player:

    npm install amazon-ivs-player

  3. Quando estiver pronto para registrar a tecnologia do Amazon IVS, importe a função registerIVSTech:

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

  4. Registre a tecnologia usando a função registerIVSTech:

    registerIVSTech(videojs, options);

    onde:

    • videojs é o objeto fornecido pelo Video.js.

    • options são as opções para a camada de tecnologia do Amazon IVS. As opções com suporte são:

      • wasmWorker: URL onde o arquivo amazon-ivs-wasmworker.min.js está hospedado.

      • wasmBinary: URL onde o arquivo amazon-ivs-wasmworker.min.wasm está hospedado.

      Os arquivos de trabalho estão em sua pasta node_modules/ em amazon-ivs-player/dist/. Você precisafazer o host deles, para usar o player do IVS.

  5. Ao criar uma instância do player, adicione AmazonIVS como sua primeira tecnologia na opção techOrder:

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

TypeScript

Se você estiver usando TypeScript, nosso pacote npm inclui os seguintes tipos que você pode querer importar e usar.

  • VideoJSEvents, que descreve a estrutura retornada de getIVSEvents().

  • VideoJSIVSTech, que descreve a interface para uma instância do player que usa a tecnologia AmazonIVS. Isso pode ser intersectado com o tipo VideoJsPlayer exposto pelo pacote npm @types/video.js.

  • TechOptions, que descreve a interface que define as opções de configuração que você pode enviar para registerIVSTech().

Para obter mais informações sobre esses tipos, consulte Amazon IVS Player SDK: Web Reference (SDK do Amazon IVS Player: referência para Web).

Eventos

Para atender eventos padrão de Video.js, use a função on do player do Video.js.

Para atender eventos específicos do Amazon IVS, adicione e remova listeners de eventos no player da Web do Amazon IVS:

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

em que callback é um retorno de chamada que você define e event é um destes itens: PlayerEventType ou PlayerState. Para obter informações sobre eventos, consulte Amazon IVS Player SDK: Web Reference (SDK do Amazon IVS Player: referência para Web).

Erros

Para erros gerais de Video.js, veja o evento error genérico no player:

player.on("error", callback);

Para erros específicos do Amazon IVS, veja no player do Amazon IVS seus próprios erros:

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

O retorno de chamada receberá um objeto com os seguintes campos:

Campo Descrição

type

O tipo de erro. Corresponde a eventos ErrorType. Para obter mais informações, consulte Amazon IVS Player SDK: Web Reference (SDK do Amazon IVS Player: referência para Web).

code

 O código do erro.

source

 Origem do erro.

message

 Mensagem de erro legível por humanos.

Plug-ins

Nós fornecemos um plugin que cria uma alternância de interface do usuário para qualidades disponíveis. Para usar este plugin, ele deve ser carregado incluindo o arquivo amazon-ivs-quality-plugin.min.js, se você estiver usando nossa tecnologia através da seguinte tag script (para a versão mais recente do IVS Player): 

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

Se você estiver usando o npm, importe oregisterIVSQualityPlugin do módulo amazon-ivs-player:

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

Em seguida, depois que você cria uma instância do seu player do Video.js, as seguintes chamadas são necessárias para se registrar e habilitá-la:

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

Isso vai criar um botão de menu de interface do usuário que permite selecionar uma qualidade para o stream.

Plugins e TypeScript

Se você estiver usando TypeScript, nosso pacote npm inclui o VideoJSQualityPlugin tipo que você pode querer importar e usar com nosso plug-in. Os plugins são basicamente mixins, de modo que esta interface de tipo deve ser usada como um tipo de intersecção com a VideoJSIVSTechInterface de typeScript.

Política de segurança de conteúdo

A API do Video.js do Amazon IVS está configurada para funcionar em páginas que usam a Política de segurança de conteúdo (CSP). Consulte a seção “Como trabalhar com a Política de segurança de conteúdo” em SDK do Amazon IVS Player: guia para Web.

Funções

Reprodução

A API do Video.js do Amazon IVS oferece suporte às interfaces necessárias para uso interno pelo framework do Video.js. É provável que a aplicação cliente precise usar esses métodos diretamente, pois o Video.js faz a integração necessária e apresenta uma interface padrão. No entanto, se necessário, uma maneira de acessar os métodos internos do player Video.js e do Amazon IVS é usar o objeto do player Video.js para obter o identificador de objeto necessário para a tecnologia.

Para acessar a API, recupere a instância do seu player de Video.js como faria normalmente:

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

Em seguida, você pode chamar funções nessa instância.

Veja a seguir o subconjunto de funções de Video.js que a camada tecnológica do Amazon IVS substitui. Para obter a lista completa das funções do Video.js, consulte a documentação da API do video.js.

Função Descrição e informações específicas do Amazon IVS

currentTime

Obtém ou define o tempo (em segundos desde o início).

Amazon IVS: não recomendamos definir a hora atual para transmissões ao vivo.

descartar

Exclui a instância do player

Amazon IVS: também exclui o backend tecnológico do Amazon IVS.

duration

Retorna a duração do vídeo, em segundos.

Amazon IVS: para transmissões ao vivo, retorna Infinity.

load

Inicia o carregamento dos dados de src().

Amazon IVS: este é um não operacional.

jogar

Reproduz o stream que foi configurado por meio da chamada de src.

Amazon IVS: se uma transmissão ao vivo foi pausada, isso reproduz a transmissão ao vivo dos quadros mais recentes, em vez de continuar de onde ela foi pausada.

Taxa de reprodução

Obtém ou define a taxa de reprodução de vídeo. 1.0 significa velocidade normal; 0,5, metade da velocidade normal; 2.0, duas vezes a velocidade normal; e assim por diante.

Amazon IVS: em uma transmissão ao vivo, um get retorna 1, e um conjunto é ignorado.

buscável

Retorna o TimeRanges dos meios de comunicação que podem ser pesquisados.

Amazon IVS: para transmissões ao vivo, chamar end(0) no valor de retorno (TimeRange) retorna infinito.

Específico do Amazon IVS

A tecnologia Video.js do Amazon IVS tem funções adicionais para acessar comportamentos específicos dos recursos do Amazon IVS:

Função Descrição

GetivsPlayer

Retorna a instância subjacente do player do Amazon IVS. A API da Web completa do player do Amazon IVS está disponível por meio dessa instância. Recomendamos usar a API básica de reprodução de Video.js tanto quanto possível e usar essa função apenas para acessar recursos específicos do Amazon IVS. As funções mais comuns que você provavelmente precisará acessar na instância do player do Amazon IVS sãosetQuality() e addEventListener()/removeEventListener().

getIVSEvents

Retorna um objeto que contém enums específicos do Amazon IVS. Isso é usado para tratar erros específicos do Amazon IVS. Para obter mais informações consulte Eventos e Erros.

currentTime

Obtém ou define o tempo (em segundos desde o início).

Amazon IVS: não recomendamos definir a hora atual para transmissões ao vivo.

Assinaturas

currentTime
currentTime(time)

Parâmetro

Parâmetro Tipo Descrição

time

número

Se time estiver ausente, obtém a hora atual. Se time estiver presente, define a reprodução de vídeo para esse tempo.

Valor de retorno

Tipo Descrição

número

A hora atual, em segundos desde o início.

descartar

Exclui a instância do player.

Amazon IVS: também exclui o backend tecnológico do Amazon IVS.

Assinatura

dispose()

Parâmetros

Nenhum

Valor de retorno

Nenhum

duration

Retorna a duração do vídeo, em segundos.

Amazon IVS: para transmissões ao vivo, retorna Infinity.

Assinatura

duration()

Parâmetros

Nenhum

Valor de retorno

Tipo Descrição

número

A duração do temporizador, em segundos. Para streams ao vivo, esse valor é Infinity.

getIVSEvents

Retorna um objeto que contém enums específicos do Amazon IVS. É usado para tratar erros e eventos específicos do Amazon IVS. Para obter mais informações, consulte:

Assinatura

getIVSEvents()

Parâmetros

Nenhum

Valor de retorno

Tipo Descrição

object

Um objeto com as chaves PlayerEventType,PlayerState e ErrorType, que são mapeadas para suas enumerações associadas.

GetivsPlayer

Retorna a instância subjacente do player do Amazon IVS. A API da Web completa do player do Amazon IVS está disponível por meio dessa instância. Recomendamos usar a API básica de reprodução de Video.js tanto quanto possível e usar essa função apenas para acessar recursos específicos do Amazon IVS. As funções mais comuns que você provavelmente precisará acessar na instância do player do Amazon IVS sãosetQuality() e addEventListener()/removeEventListener().

Assinatura

getIVSPlayer()

Parâmetros

Nenhum

Valor de retorno

Tipo Descrição

MediaPlayer

A instância criada do player.

load

Inicia o carregamento dos dados de src().

Amazon IVS: este é um não operacional.

Assinatura

load()

Parâmetros

Nenhum

Valor de retorno

Nenhum

jogar

Reproduz o stream que foi configurado por meio da chamada de src.

Amazon IVS: se uma transmissão ao vivo foi pausada, isso reproduz a transmissão ao vivo dos quadros mais recentes, em vez de continuar de onde ela foi pausada.

Assinatura

play()

Parâmetros

Nenhum

Valor de retorno

Nenhum

Taxa de reprodução

Obtém ou define a taxa de reprodução de vídeo. 1.0 significa velocidade normal; 0,5, metade da velocidade normal; 2.0, duas vezes a velocidade normal; e assim por diante.

Amazon IVS: em uma transmissão ao vivo, um get retorna 1, e um conjunto é ignorado.

Assinaturas

playbackRate
playbackRate(rate)

Parâmetro

Parâmetro Tipo Descrição

rate

número

A taxa de reprodução. Valores válidos: no intervalo [0,25, 2.0].

Valor de retorno

Tipo Descrição

número

A taxa de reprodução.

buscável

Retorna o TimeRanges dos meios de comunicação que podem ser pesquisados.

Amazon IVS: para transmissões ao vivo, chamar end(0) no valor de retorno (TimeRange) retorna infinito.

Assinatura

seekable()

Parâmetro

Nenhum

Valor de retorno

Tipo Descrição

TimeRange

TimeRange da mídia que está disponível para buscá-la.