Começar a usar o SDK de DAI do IMA

Os SDKs do IMA facilitam a integração de anúncios multimídia aos seus sites e aplicativos. Os SDKs do IMA podem solicitar anúncios de qualquer servidor compatível com VAST e gerenciar a reprodução de anúncios nos seus aplicativos. Com os SDKs de DAI do IMA, os apps fazem uma solicitação de stream para anúncios e vídeos de conteúdo, sejam eles VOD ou ao vivo. Em seguida, o SDK retorna um stream de vídeo combinado para que você não precise alternar entre o anúncio e o conteúdo de vídeo no seu app.

Selecione a solução de DAI do seu interesse

Serviço completo Veiculação de pods

DAI de veiculação de conjunto

Este guia demonstra como reproduzir um stream de veiculação de conjunto DAI para conteúdo ao vivo ou VOD usando o SDK de DAI do IMA para HTML5 com um player de vídeo que depende de hls.js para reprodução. Se você quiser conferir ou acompanhar uma integração de amostra completa, com suporte para HLS.js e reprodução no Safari, consulte o exemplo de veiculação de pod de HLS. Para compatibilidade com DASH.js, consulte o exemplo de veiculação de pod DASH. Faça o download desses apps de exemplo na página de versão da DAI de HTML5 no GitHub.

Observação:o SDK de DAI do IMA para HTML5 é compatível com streams HLS e DASH, mas a reprodução de cada um requer um player de mídia ou extensão diferente, como HLS.js ou DASH.js, com implementações variadas.

Este guia explica como configurar o HLS.js e o SDK de DAI do IMA para reproduzir um stream HLS, com observações importantes sobre as diferenças de implementação do DASH.

Consulte o aplicativo de exemplo DASH.js do IMA (em inglês) para ter um ponto de partida na implementação de streams da DAI do DASH com o IMA.

Importante :para usar a Veiculação de conjunto DAI, é preciso trabalhar com um parceiro de veiculação de conjuntos e 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 informações sobre como se inscrever no Ad Manager, acesse a Central de Ajuda do Ad Manager.

Observação:para informações sobre a integração com outras plataformas ou sobre como usar os SDKs do IMA do lado do cliente, consulte SDKs do Interactive Media Ads.

Visão geral da Veiculação de conjunto DAI

A implementação da veiculação de conjuntos usando o SDK de DAI do IMA envolve dois componentes principais, que são demonstrados neste guia:

• PodStreamRequest / PodVodStreamRequest: um objeto que define uma solicitação de stream para os servidores de publicidade do Google. As solicitações especificam um código de rede, e PodStreamRequest também exige uma chave de recurso personalizada e uma chave de API opcional. Ambos incluem outros parâmetros opcionais.

• StreamManager: objeto que gerencia a comunicação entre o stream de vídeo e o SDK de DAI do IMA, por exemplo, dispara pings de rastreamento e encaminha eventos de stream ao editor.

Pré-requisitos

Antes de começar, os seguintes itens são necessários:

• Três arquivos vazios:

  • dai.html
  • dai.css
  • dai.js

• Python instalado no computador, servidor da Web ou outro ambiente de desenvolvimento hospedado para usar em testes

Configurar um ambiente de desenvolvimento

Como o SDK carrega dependências usando o mesmo protocolo da página de carregamento, você precisa usar um servidor da Web para testar seu app. A maneira mais simples de iniciar um servidor de desenvolvimento local é usar o servidor integrado do Python.

1. Usando uma linha de comando no diretório que contém o arquivo index.html, execute:

   python -m http.server 8000
   

   Observação :http.server está disponível apenas no Python 3.x.

2. Em um navegador da Web, acesse http://localhost:8000/.

   Também é possível usar qualquer outro ambiente de desenvolvimento hospedado ou servidor da Web, como o Apache HTTP Server.

Criar um player de vídeo simples

Observação: este guia pressupõe que você esteja usando a biblioteca HLS.js para reproduzir um stream HLS. O SDK de DAI do IMA para HTML5 também é compatível com streams DASH, com uma biblioteca adequada, como player Shaka ou DASH.js.

Primeiro, modifique o arquivo dai.html para criar um elemento de vídeo HTML5 simples e um div para usar nos elementos da interface do anúncio. Adicione também as tags necessárias para carregar os arquivos dai.css e dai.js, bem como para importar o player de vídeo hls.js.

Em seguida, modifique dai.css para especificar o tamanho e a posição dos elementos da página. Por fim, no dai.js, defina variáveis para manter as informações da solicitação de stream e uma função initPlayer() para executar quando a página carregar.

As constantes de solicitação de stream são as seguintes:

• BACKUP_STREAM: um URL para um stream de backup a ser reproduzido caso o processo de anúncios encontre um erro fatal.

• STREAM_URL: usado apenas para transmissões ao vivo. O URL do stream de vídeo fornecido pelo manipulador de manifesto ou parceiro terceirizado usando a veiculação de conjuntos. Você precisa inserir o ID de stream fornecido pelo SDK de DAI do IMA antes de fazer uma solicitação. Nesse caso, o URL do stream inclui um marcador, [[STREAMID]], que é substituído pelo ID do stream antes de fazer uma solicitação.

• NETWORK_CODE: é o código de rede da sua conta do Ad Manager 360.

• CUSTOM_ASSET_KEY: usado apenas para transmissões ao vivo. A chave de recurso personalizado que identifica o evento de veiculação de conjunto no Ad Manager 360. Isso pode ser criado pelo seu manipulador de manifesto ou parceiro terceirizado de veiculação de pods.

• API_KEY: usado apenas para transmissões ao vivo. Uma chave de API opcional que pode ser necessária para recuperar um ID de stream do SDK de DAI do IMA.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Stream Config.
const STREAM_URL = "https://encodersim.sandbox.google.com/masterPlaylist/...&stream_id=[[STREAMID]]";
const NETWORK_CODE = "51636543";
const CUSTOM_ASSET_KEY = "google-sample";
const API_KEY = "";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

Carregar o SDK de DAI do IMA

Em seguida, adicione o framework da DAI usando uma tag de script em dai.html, antes da tag para dai.js.

Observação: para receber registros mais detalhados do console, substitua ima3_dai.js por ima3_dai_debug.js. No entanto, ima3_dai_debug.js não pode ser usado em apps de produção.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
...

Inicializar o StreamManager e fazer uma solicitação de transmissão ao vivo ou VOD

Veiculação de conjuntos de transmissão ao vivo

Para solicitar um conjunto de anúncios, crie um ima.dai.api.StreamManager, que é responsável por solicitar e gerenciar streams da DAI. O construtor usa um elemento de vídeo, e a instância resultante usa um elemento da interface do anúncio para processar as interações com o anúncio.

Em seguida, defina uma função para solicitar a transmissão ao vivo do pod. Primeiro, essa função cria um PodStreamRequest, o configura com os parâmetros streamRequest fornecidos na etapa 2 e, em seguida, chama streamManager.requestStream() com esse objeto de solicitação.

Importante: neste exemplo, nenhum dos fluxos está protegido, então apiKey não é usado. Caso seu stream precise de uma chave de API, consulte Autenticar solicitações de stream de vídeo da DAI.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestLivePodStream(NETWORK_CODE, CUSTOM_ASSET_KEY, API_KEY);
}

function requestLivePodStream(networkCode, customAssetKey, apiKey) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving live Stream Request
  const streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

Veiculação de conjunto de VOD

Para solicitar um conjunto de anúncios, crie um ima.dai.api.StreamManager, que é responsável por solicitar e gerenciar streams da DAI. O construtor usa um elemento de vídeo, e a instância resultante usa um elemento da interface do anúncio para processar as interações com o anúncio.

Em seguida, defina uma função para solicitar o fluxo de VOD de veiculação pelo conjunto. Primeiro, essa função cria um PodVodStreamRequest, o configura com os parâmetros streamRequest fornecidos na etapa 2 e, em seguida, chama streamManager.requestStream() com esse objeto de solicitação.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestVodPodStream(NETWORK_CODE);
}

function requestVodPodStream(networkCode) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving VOD Stream Request
  const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

Processar eventos de fluxo

Veiculação de conjuntos de transmissão ao vivo

Em seguida, implemente listeners de eventos para grandes eventos de vídeo. Este exemplo lida com os eventos STREAM_INITIALIZED, ERROR, AD_BREAK_STARTED e AD_BREAK_ENDED chamando uma função onStreamEvent(). Essa função lida com erros e carregamento de stream, além de desativar os controles do player enquanto um anúncio é reproduzido, o que é exigido pelo SDK. Quando a transmissão é carregada, o player de vídeo carrega e reproduz o URL fornecido usando uma função loadStream().

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
    google.ima.dai.api.StreamEvent.Type.ERROR,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      console.log('Stream initialized');
      loadStream(e.getStreamData().streamId);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream('');
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(streamID) {
  var url;
  if(streamID) {
    url = STREAM_URL.replace('[[STREAMID]]', streamID);
  } else {
    console.log('Stream Initialization Failed');
    url = BACKUP_STREAM;
  }
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

Veiculação de conjunto de VOD

Em seguida, implemente listeners de eventos para grandes eventos de vídeo. Este exemplo lida com os eventos STREAM_INITIALIZED, LOADED, ERROR, AD_BREAK_STARTED e AD_BREAK_ENDED chamando uma função onStreamEvent(). Essa função processa o carregamento e os erros do stream, além de desativar os controles do player enquanto um anúncio é reproduzido, o que é exigido pelo SDK.

Além disso, os streams de veiculação de conjuntos de VOD exigem a chamada de StreamManager.loadStreamMetadata() em resposta ao evento STREAM_INITIALIZED. Também é necessário solicitar um URL de stream do seu parceiro de tecnologia de vídeo (VTP, na sigla em inglês). Quando a chamada loadStreamMetadata() é bem-sucedida, ela aciona um evento LOADED, em que você precisa chamar uma função loadStream() com o URL de stream para carregar e reproduzir o stream.

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
    google.ima.dai.api.StreamEvent.Type.ERROR,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      const streamId = e.getStreamData().streamId;
      // 'vtpInterface' is a place holder for your own video technology
      //  partner (VTP) API calls.
      vtpInterface.requestStreamURL({
        'streamId': streamId,
      })
      .then( (vtpStreamUrl) => {
        streamUrl = vtpStreamUrl;
        streamManager.loadStreamMetadata();
      }, (error) => {
        // Handle the error.
      });
      break;
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(streamUrl);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(url) {
  if(url) {
    console.log('Loading:' + url);
    hls.loadSource(url);
  } else {
    console.log('Stream Initialization Failed');
    hls.loadSource(BACKUP_STREAM);
  }
  hls.attachMedia(videoElement);
}

Processar metadados do stream

Nesta etapa, você vai implementar listeners de eventos para metadados a fim de notificar o SDK quando eventos de anúncios ocorrerem. A detecção de eventos de metadados in-stream pode variar dependendo do formato de transmissão (HLS ou DASH), do tipo de transmissão (ao vivo ou VOD), do tipo de player e do tipo de back-end da DAI usado. Consulte nosso guia Metadados cronometrados para mais informações.

Formato da transmissão HLS (transmissões ao vivo e VOD, player HLS.js)

Se você estiver usando um player HLS.js, detecte o evento FRAG_PARSING_METADATA do HLS.js para receber metadados ID3 e transmiti-los ao SDK com StreamManager.processMetadata().

Para abrir o vídeo automaticamente depois que tudo estiver carregado e pronto, detecte o evento MANIFEST_PARSED de HLS.js para acionar a reprodução.

function loadStream(streamID) {
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  
  // Timed metadata is passed HLS stream events to the streamManager.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, parseID3Events);
  hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
}

function parseID3Events(event, data) {
  if (streamManager && data) {
    // For each ID3 tag in the metadata, pass in the type - ID3, the
    // tag data (a byte array), and the presentation timestamp (PTS).
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
}

function startPlayback() {
  console.log('Video Play');
  videoElement.play();
}

DASH.js (formato de transmissões DASH, tipo de transmissão ao vivo e VOD)

Se você estiver usando um player DASH.js, será necessário usar strings diferentes para ouvir metadados ID3 de transmissões ao vivo ou VOD:

• Transmissões ao vivo: 'https://developer.apple.com/streaming/emsg-id3'
• Streams de VOD: 'urn:google:dai:2018'

Transmita os metadados ID3 ao SDK com StreamManager.processMetadata().

Para mostrar os controles de vídeo automaticamente depois que tudo estiver carregado e pronto, ouça o evento MANIFEST_LOADED do DASH.js.

const googleLiveSchema = 'https://developer.apple.com/streaming/emsg-id3';
const googleVodSchema = 'urn:google:dai:2018';
dashPlayer.on(googleLiveSchema, processMetadata);
dashPlayer.on(googleVodSchema, processMetadata);
dashPlayer.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);

function processMetadata(metadataEvent) {
  const messageData = metadataEvent.event.messageData;
  const timestamp = metadataEvent.event.calculatedPresentationTime;

  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with dash.js.
  streamManager.processMetadata('ID3', messageData, timestamp);
}

function loadlistener() {
  showControls();

  // This listener must be removed, otherwise it triggers as addional
  // manifests are loaded. The manifest is loaded once for the content,
  // but additional manifests are loaded for upcoming ad breaks.
  dashPlayer.off(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);
}

Shaka Player com transmissões ao vivo (formato de streaming DASH)

Se você estiver usando o player Shaca para reprodução da transmissão ao vivo, use a string 'emsg' para detectar eventos de metadados. Em seguida, use os dados das mensagens do evento na chamada para StreamManager.onTimedMetadata().

shakaPlayer.addEventListener('emsg', (event) => onEmsgEvent(event));

function onEmsgEvent(metadataEvent) {
  // Use StreamManager.onTimedMetadata() if your video player provides
  // processed metadata, as with Shaka player livestreams.
  streamManager.onTimedMetadata({'TXXX': metadataEvent.detail.messageData});
}

Shaka Player com streams VOD (formato de streams DASH)

Se você estiver usando o player Shaca para reprodução de streaming de VOD, use a string 'timelineregionenter' para detectar eventos de metadados. Em seguida, use os dados da mensagem do evento na chamada para StreamManager.processMetadata() com a string 'urn:google:dai:2018'.

shakaPlayer.addEventListener('timelineregionenter', (event) => onTimelineEvent(event));

function onTimelineEvent(metadataEvent) {
  const detail = metadataEvent.detail;
  if ( detail.eventElement.attributes &&
       detail.eventElement.attributes['messageData'] &&
       detail.eventElement.attributes['messageData'].value ) {
        const mediaId = detail.eventElement.attributes['messageData'].value;
        const pts = detail.startTime;
        // Use StreamManager.processMetadata() if your video player provides raw
        // ID3 tags, as with Shaka player VOD streams.
        streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
       }
}

Processar eventos do jogador

Adicione listeners de eventos aos eventos pause e start do elemento de vídeo para permitir que o usuário retome a reprodução quando o SDK fizer uma pausa durante os intervalos de anúncio.

function loadStream(streamUrl) {
  ...
  
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

Pronto! Agora você está solicitando e exibindo anúncios em um stream de veiculação de conjunto com o SDK de DAI do IMA para HTML5. Para saber mais sobre recursos mais avançados do SDK, consulte os outros guias ou os exemplos no GitHub (link em inglês).