Esta página foi traduzida pela API Cloud Translation.

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 apps. Os SDKs do IMA podem solicitar anúncios de qualquer servidor de anúncios compatível com VAST e gerenciar a veiculação de anúncios nos seus apps. Com os SDKs do IMA DAI, os apps fazem uma solicitação de transmissão para anúncios e vídeos de conteúdo, seja VOD ou conteúdo ao vivo. O SDK retorna uma transmissão de vídeo combinada para que você não precise alternar entre o anúncio e o vídeo de conteúdo no app.

Selecione a solução de DAI de seu interesse

DAI de serviço completo

Este guia demonstra como integrar o SDK IMA DAI a um app de reprodução de vídeo simples. Se você quiser conferir ou acompanhar uma integração de exemplo completa, faça o download do exemplo simples no GitHub.

Visão geral da DAI do IMA

A implementação do SDK do IMA DAI envolve dois componentes principais, conforme demonstrado neste guia:

StreamRequest: um VODStreamRequest ou um LiveStreamRequest. Um objeto que define uma solicitação de stream. As solicitações de transmissão podem ser para transmissões ao vivo ou de vídeo on demand. As solicitações especificam um ID de conteúdo, uma chave de API ou token de autenticação e outros parâmetros.
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 transmissão também processa pings de rastreamento e encaminha eventos de transmissão e de anúncio para o editor.

Pré-requisitos

Três arquivos vazios
- dai.html
- dai.css
- dai.js
Python instalado no computador ou um servidor da Web para uso em testes

Iniciar um servidor de desenvolvimento

Como o SDK do IMA DAI carrega dependências usando o mesmo protocolo da página de carregamento, é necessário usar um servidor da Web para testar o app. Uma maneira rápida de iniciar um servidor de desenvolvimento local é usar o servidor integrado do Python.

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.
Em um navegador da Web, acesse http://localhost:8000/.

Você também pode usar qualquer outro servidor da Web, como o Apache HTTP Server.

Criar um player de vídeo simples

Primeiro, modifique dai.html para criar um elemento de vídeo HTML5 simples e um div para usar no clique. Adicione também as tags necessárias para carregar os arquivos dai.css e dai.js, além de 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, em dai.js, defina variáveis para armazenar as informações da solicitação de stream e uma função initPlayer() para executar quando a página carregar.

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

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

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

Carregar o SDK do IMA DAI

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

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 stream

Para solicitar um conjunto de anúncios, crie um ima.dai.api.StreamManager, que é responsável por solicitar e gerenciar fluxos de DAI. O construtor usa um elemento de vídeo, e a instância resultante usa um elemento de interface do anúncio para processar cliques no anúncio.

Em seguida, defina as funções que solicitam transmissões. Este exemplo inclui funções para VOD e transmissões ao vivo, que criam instâncias de VODStreamRequest e LiveStreamRequest, respectivamente, e chamam streamManager.requestStream() com os parâmetros streamRequest. Para transmissões ao vivo, também é necessário adicionar um gerenciador para detectar eventos de metadados programados e encaminhar os eventos para o StreamManager. Você pode comentar ou remover o comentário do código para se adequar ao seu caso de uso. Ambos os métodos usam uma chave de API opcional. Se você estiver usando uma transmissão protegida, precisa criar uma chave de autenticação da DAI.

Nenhum dos streams neste exemplo está protegido, então apiKey não é usado.

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

Processar eventos de transmissão

Por fim, é necessário implementar listeners de eventos para os principais eventos de vídeo. Este exemplo simples processa os eventos 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 está sendo veiculado, o que é necessário para o SDK. Quando o stream é carregado, o player de vídeo carrega e reproduz o URL fornecido usando uma função loadUrl().

Você também pode configurar listeners de eventos para os eventos pause e start do elemento de vídeo para permitir que o usuário retome a reprodução quando o IMA pausar durante intervalos de anúncios.

Para trabalhar com a DAI, seu player personalizado precisa transmitir eventos ID3 para transmissões ao vivo aos SDKs da DAI do IMA, conforme mostrado no código de exemplo.

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     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.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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 com o SDK do DAI do IMA. Para saber mais sobre recursos avançados do SDK, consulte os outros guias ou os exemplos no GitHub.