# SDK do Reprodutor do IVS: 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 Reprodutor do Video.js:** 1.50.0 ([Notas da versão](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#mar19-26-player-web-ll)) ## Conceitos básicos O suporte do Amazon IVS para Video.js é implementado por meio de uma [tecnologia](https://videojs.com/guides/tech/) 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\$1 e 8\$1 posteriores. Observe que ao instanciar o player, a [opção de fontes](https://videojs.com/guides/options/#sources) 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](https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276). ### 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). ``` ``` 1. Registre a tecnologia usando a função `registerIVSTech`: ``` registerIVSTech(videojs); ``` onde `videojs` é o objeto fornecido pelo Video.js. 1. 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](https://videojs.com/guides/options/#sources) 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. ```

``` ### Configurar com NPM Para usar o Player do Amazon IVS através do npm: 1. Instale o pacote npm do [video.js](https://www.npmjs.com/package/video.js/v/7.6.6) ou certifique-se de que seu projeto tem algum outro acesso à biblioteca do Video.js. 1. Instale o pacote npm do `amazon-ivs-player`: ``` npm install amazon-ivs-player ``` 1. Quando estiver pronto para registrar a tecnologia do Amazon IVS, importe a função `registerIVSTech`: ``` import { registerIVSTech } from 'amazon-ivs-player'; ``` 1. Registre a tecnologia usando a função `registerIVSTech`: ``` registerIVSTech(videojs, options); ``` em que: + `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. 1. 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 podem ser importados e usados. + `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](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) com o tipo `VideoJsPlayer` exposto pelo pacote npm [@types/video.js](https://www.npmjs.com/package/@types/video.js). + `TechOptions`, que descreve a interface que define as opções de configuração que podem ser enviadas para `registerIVSTech()`. Para obter mais informações sobre esses tipos, consulte [Amazon IVS Player SDK: Web Reference](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/) (SDK do Amazon IVS Player: referência para Web). ## Eventos Para atender eventos padrão de Video.js, use a função [on](https://docs.videojs.com/docs/api/player.html#Methodson) 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](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/) (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](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/) (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 plug-in 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): ``` ``` Se você estiver usando o npm, importe o`registerIVSQualityPlugin` 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 tipo `VideoJSQualityPlugin` que pode ser importado e usado com o nosso plug-in. Os plug-ins são basicamente mixins, de modo que esta interface de tipo deve ser usada como um [tipo de interseção](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) com a Interface de typeScript `VideoJSIVSTech`. ## 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 reprodutor do IVS: guia para a Web](web-content-security-policy.md). ## 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