Esta página foi traduzida pela API Cloud Translation.

Começar a usar o SDK de DAI do IMA

Com os SDKs do IMA, é fácil integrar anúncios multimídia aos seus sites e apps. Os SDKs do IMA podem solicitar anúncios de qualquer de anúncios compatíveis com VAST e gerencie a reprodução de anúncios nos seus apps. Com os SDKs de DAI do IMA, os apps criam uma solicitação de streaming para anúncio e conteúdo de vídeo, seja VOD ou conteúdo ao vivo. Em seguida, o SDK retorna uma stream de vídeo combinado, para que você não precise alternar entre anúncios e conteúdo em vídeo no seu app.

Selecione a solução de DAI do seu interesse

DAI de serviço completo

Este guia demonstra como integrar o SDK de DAI do IMA em um vídeo simples player de vídeo. Se você quiser visualizar ou acompanhar um exemplo completo faça o download do exemplo simples do GitHub.

Visão geral da DAI do IMA

A implementação do SDK de DAI do IMA envolve dois componentes principais, como demonstrado nos deste 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 vídeo on demand ou ao vivo córregos. As solicitações especificam um ID de conteúdo, bem como uma chave de API ou um token de autenticação e outros parâmetros.
StreamManager: Um objeto que processa fluxos de Inserção de anúncios dinâmicos e interações com o back-end da DAI. A O gerenciador de streams também lida com pings de rastreamento e encaminha eventos de anúncios e streams para editor.

Pré-requisitos

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

Iniciar um servidor de desenvolvimento

Como o SDK de DAI do IMA carrega dependências usando o mesmo protocolo que a página de onde ele é carregado, você precisa usar um servidor da Web para testar seu aplicativo. Um maneira rápida de iniciar um servidor de desenvolvimento local é usar a biblioteca integrada servidor.

Usando uma linha de comando, no diretório que contém seu arquivo index.html executar:
```
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 Servidor.

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 para o clique. Adicione também as tags necessárias para carregar o arquivo dai.css. e dai.js, além de importar o player de vídeo hls.js. Depois, 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 manter a solicitação de stream informações e uma função initPlayer() a ser executada quando a página for carregada.

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 de DAI do IMA

Em seguida, adicione a estrutura do 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 streams da DAI. O construtor recebe uma de vídeo e a instância resultante toma um elemento da interface de anúncio para lidar com o cliques.

Em seguida, defina funções que solicitam streams. Este exemplo inclui funções para VOD e transmissões ao vivo, que criam instâncias de VODStreamRequest e LiveStreamRequest, respectivamente, e depois chamar streamManager.requestStream(). usando os parâmetros streamRequest. Nas transmissões ao vivo, você também precisa adicionar um para detectar eventos de metadados com marcação de tempo e encaminhar os eventos para o StreamManager: Você pode comentar ou remover a marca de comentário do código de acordo com seu caso de uso. Os dois métodos aceitam uma chave de API opcional. Se você estiver usando um stream protegido, precisa criar uma chave de autenticação de DAI.

Nenhum stream neste exemplo está protegido. Portanto, 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 stream

Finalmente, você precisa implementar listeners de eventos para os principais eventos de vídeo. Isso exemplo simples lida com LOADED, ERROR, AD_BREAK_STARTED e eventos AD_BREAK_ENDED chamando uma função onStreamEvent(). Essa função lida com o carregamento e os erros da transmissão, além de desativar os controles do player durante a reprodução de um anúncio, o que é exigido pelo SDK. Quando a transmissão é carregado, o player de vídeo carrega e exibe o URL fornecido usando um loadUrl() função.

Também é possível configurar listeners de eventos para o elemento de vídeo pause e start para permitir que o usuário retome a reprodução quando o IMA pausar durante os intervalos de anúncio.

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

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 de DAI do IMA. Para para conhecer mais recursos avançados do SDK, consulte os outros guias ou a no GitHub.