Começar a usar o SDK do IMA em HbbTV

O SDK do IMA DAI oferece suporte à integração em um app de player de vídeo HbbTV mínimo. Ele permite que a demanda do Google Ad Manager por um stream de anúncios de banda larga acompanhe um stream de conteúdo de transmissão. Este guia aborda o carregamento de um manifesto de anúncios com base em dados de eventos de anúncios do stream de transmissão.

Para conferir ou acompanhar uma integração de amostra concluída, faça o download do app de amostra linear do HbbTV com o SDK HTML5 do IMA DAI. Para oferecer suporte a dispositivos de TV mais antigos, este guia e o app de exemplo do GitHub estão em JavaScript ES5.

Para informações sobre a integração com outras plataformas que não são HbbTV, consulte SDKs de anúncios de mídia interativa.

Pré-requisitos

Antes de continuar com este guia, confirme se você tem o seguinte:

  • Para usar o IMA DAI, é necessário ter uma conta avançada do Ad Manager 360. Se você tiver uma conta do Ad Manager, entre em contato com o gerente de contas para mais detalhes. Para informações sobre como se inscrever no Ad Manager, acesse a Central de Ajuda do Ad Manager.
  • Um app HbbTV que interage com o objeto de transmissão para reprodução de mídia. Para mais detalhes, consulte Objeto AV de transmissão do HbbTV.
  • Uma versão do dash.js que oferece suporte ao pré-carregamento. Recomendamos usar a versão 4.6.0 ou mais recente.
  • Um servidor da Web para hospedar o aplicativo.
  • Um ambiente de teste com um stream de transmissão DVB. Para instruções detalhadas sobre como configurar o ambiente de teste, consulte Executar um aplicativo HbbTV.
    • Stream de transmissão: prepare um stream de transmissão que contenha dados personalizados da tabela de informações do aplicativo (AIT, na sigla em inglês). Você também precisa de uma maneira de transmitir o stream de transmissão para recepção pela TV. É possível usar um modulador DVB para transmitir o stream de transmissão ou outros métodos.
    • Servidor da Web: hospede o aplicativo HbbTV em um servidor da Web acessível pela TV.
  • Um evento de transmissão ao vivo com o tipo Manifesto de veiculação de conjunto. Para criar o evento, consulte Configurar uma transmissão ao vivo para DAI.

Criar um stream de transmissão compatível

O app HbbTV usa broadcastContainer.addStreamEventListener() para detectar eventos de stream HbbTV no stream de transmissão. Para carregar e veicular anúncios corretamente, configure o stream de transmissão com os seguintes tipos de eventos para incluir o payload de string JSON associado:

  • AD_BREAK_EVENT_ANNOUNCE - {"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}
  • AD_BREAK_EVENT_START - {"type":"adBreakStart"}
  • AD_BREAK_EVENT_END - {"type":"adBreakEnd"}

Para esses eventos, inclua um payload de string JSON com streamEvent.type. Para oferecer suporte ao pré-carregamento de anúncios, o evento AD_BREAK_EVENT_ANNOUNCE precisa incluir streamEvent.duration e streamEvent.offset. Para mais informações, consulte Detectar eventos de stream HbbTV. Para configurar o stream de transmissão, consulte o exemplo de stream de transporte MPEG multiplexado. Para usar o stream de exemplo, atualize o URL da tabela de informações do aplicativo para sua própria configuração de stream.

Criar um evento de transmissão ao vivo de veiculação de conjunto

Para veicular anúncios no app HbbTV, você precisa de um evento de transmissão ao vivo de veiculação de conjunto. Para informações sobre como configurar o evento, consulte Configurar uma transmissão ao vivo para DAI. Para acessar o stream configurado, o app precisa ter as seguintes variáveis:

  • NETWORK_CODE: o código de rede do Ad Manager para solicitar anúncios.
  • CUSTOM_ASSET_KEY: a chave de recurso personalizada do Ad Manager gerada durante o processo de configuração da transmissão ao vivo para DAI.

Criar a estrutura de arquivos do aplicativo

Este guia usa uma estrutura de arquivos semelhante ao app de amostra do IMA HbbTV. Para acompanhar este guia, crie os seguintes arquivos:

  • index.html: índice HTML do seu app.
  • Style.css: estilo CSS do seu app.
  • application.js: ponto de entrada principal do JS. Gerencia o estado de reprodução e os intervalos de anúncios.
  • video_player.js: gerencia o player dash.js usado para a veiculação de anúncios.
  • ads_manager.js: gerencia a configuração do IMA, a solicitação de stream e o processamento de eventos.

ads_manager.js configura o SDK do IMA DAI. Os componentes a seguir implementam o SDK do IMA DAI:

  • PodStreamRequest: um objeto que define uma solicitação de stream para os servidores de publicidade do Google.
  • StreamManager: um objeto que processa streams de inserção de anúncios dinâmicos e interações com o back-end da DAI. O gerenciador de streams também processa pings de rastreamento e encaminha eventos de stream e de anúncios para o editor.

Para instruções detalhadas sobre como configurar o ambiente de teste, consulte este guia sobre como executar um aplicativo HbbTV.

Carregar o SDK do IMA DAI e o DASH.js

Para iniciar a reprodução do stream de anúncios de transmissão, carregue o SDK do IMA DAI e o dash.js no seu app. Antes da tag application.js, adicione o dash.js e o framework do IMA usando tags de script em index.html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>

Em seguida, crie uma classe de wrapper do player de vídeo para iniciar e controlar o player dash.js.

Avançar
Configurar a classe de jogadores