O SDK da DAI do IMA oferece suporte à integração em um app mínimo de player de vídeo HbbTV. O SDK da DAI do IMA permite que a demanda do Google Ad Manager para um fluxo de anúncios de banda larga acompanhe um fluxo de conteúdo de transmissão. Este guia aborda o carregamento de um manifesto de anúncio com base nos dados de eventos de anúncios do fluxo de transmissão.
Para conferir ou acompanhar uma integração de exemplo completa, faça o download do app de exemplo linear do HbbTV com o SDK DAI HTML5 do IMA. 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 do Interactive Media Ads.
Pré-requisitos
Antes de continuar com este guia, verifique se você tem o seguinte:
- Para usar o IMA DAI, é necessário ter uma conta do Ad Manager 360 Advanced. Se você tiver uma conta do Ad Manager, entre em contato com o gerente de contas para mais detalhes. Para saber como se inscrever no Ad Manager, acesse a Central de Ajuda do Ad Manager.
- Um app HbbTV interagindo com o objeto de transmissão para a reprodução de mídia. Para mais detalhes, consulte Objeto AV de transmissão 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 fluxo de transmissão DVB. Para instruções detalhadas
sobre como configurar o ambiente de teste, consulte
Como executar um aplicativo HbbTV.
- Broadcast stream: prepare um broadcast stream contendo dados personalizados da tabela de informações do aplicativo (AIT). Você também precisa de uma maneira de transmitir o fluxo de transmissão para que a TV o receba. É possível usar um modulator DVB para transmitir o fluxo 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 transmissão do HbbTV no stream de transmissão. Para carregar e exibir anúncios corretamente,
configure o fluxo de transmissão com os seguintes tipos de evento para
incluir o payload da string JSON associada:
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
Ouvir eventos de streaming de HbbTV.
Para configurar o fluxo de transmissão, consulte o exemplo
fluxo de transporte MPEG multiplexado.
Para usar o exemplo de transmissão, atualize o URL da tabela de informações do aplicativo
para sua própria configuração de transmissão.
Criar um evento de transmissão ao vivo do pod
Para veicular anúncios no seu app HbbTV, você precisa de um evento de transmissão ao vivo do pod. Para informações sobre a configuração do 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 a DAI.
Criar a estrutura de arquivos do aplicativo
Este guia usa uma estrutura de arquivos semelhante ao app de exemplo da IMA HbbTV. Para acompanhar este guia, crie os seguintes arquivos:
index.html: índice HTML do app.Style.css: estilo CSS para 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 reprodução de anúncios.ads_manager.js: gerencia a configuração do IMA, a solicitação de transmissão e o processamento de eventos.
ads_manager.js configura o SDK do DAI do IMA. Os seguintes componentes implementam o
SDK IMA DAI:
PodStreamRequest: um objeto que define uma solicitação de transmissão 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 stream 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 começar a reprodução do fluxo de anúncios de transmissão, carregue o SDK da DAI do IMA 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://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 de player de vídeo para iniciar e controlar o player dash.js.