Ta strona została przetłumaczona przez Cloud Translation API.

Pierwsze kroki z pakietem IMA DAI SDK

Pakiety IMA SDK ułatwiają integrację reklam multimedialnych z witrynami i aplikacjami. Pakiety IMA SDK mogą wysyłać żądania reklam z dowolnego serwera reklam zgodnego z VAST i zarządzać odtwarzaniem reklam w aplikacjach. Dzięki pakietom SDK IMA DAI aplikacje wysyłają żądania strumienia danych wideo z reklam i treści wideo – VOD lub treści na żywo. Pakiet SDK zwraca połączony strumień wideo, więc nie musisz już zarządzać przełączaniem się między reklamą a treścią wideo w aplikacji.

Wybierz rozwiązanie DAI, które Cię interesuje

DAI z pełną obsługą

Ten przewodnik pokazuje, jak zintegrować pakiet IMA DAI SDK z prostą aplikacją odtwarzacza wideo. Jeśli chcesz obejrzeć ukończoną integrację z przykładem, pobierz prosty przykład z GitHuba.

Omówienie IMA DAI

Implementacja pakietu IMA DAI SDK obejmuje 2 główne komponenty, które pokazano w tym przewodniku:

StreamRequest – VODStreamRequest lub LiveStreamRequest: obiekt definiujący żądanie strumienia. Żądania strumieni mogą dotyczyć wideo na żądanie lub transmisji na żywo. Żądania określają identyfikator treści, a także klucz interfejsu API lub token uwierzytelniania i inne parametry.
StreamManager: obiekt, który obsługuje strumienie dynamicznego wstawiania reklam i interakcje z backendem DAI. Menedżer strumienia obsługuje też pingi śledzące oraz przekazuje do wydawcy strumienie i zdarzenia reklamowe.

Wymagania wstępne

3 puste pliki
- dai.html
- dai.css
- dai.js
Python zainstalowany na komputerze lub serwer WWW do testowania

Uruchamianie serwera programistycznego

Pakiet IMA DAI SDK wczytuje zależności za pomocą tego samego protokołu co strona, z której jest wczytywana, dlatego do przetestowania aplikacji musisz użyć serwera WWW. Szybkim sposobem na uruchomienie lokalnego serwera programistycznego jest użycie wbudowanego serwera Pythona.

Za pomocą wiersza poleceń, z katalogu zawierającego uruchomienie pliku index.html:
```
python -m http.server 8000
```
Uwaga: język http.server jest dostępny tylko w języku Python 3.x.
W przeglądarce otwórz stronę http://localhost:8000/

Możesz też używać dowolnego innego serwera WWW, np. Apache HTTP Server.

Utwórz prosty odtwarzacz wideo

Najpierw zmodyfikuj dai.html, by utworzyć prosty element wideo HTML5 i element div do klikalności. Dodaj też tagi potrzebne do wczytania plików dai.css i dai.js oraz do zaimportowania odtwarzacza wideo hls.js. Następnie zmodyfikuj plik dai.css, by określić rozmiar i pozycję elementów strony. Na koniec w tagu dai.js zdefiniuj zmienne, które będą zawierać informacje o żądaniu strumienia, oraz funkcję initPlayer(), która ma być uruchamiana po wczytaniu strony.

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');
}

Wczytaj pakiet IMA DAI SDK

Następnie dodaj platformę IMA, używając tagu skryptu w pliku dai.html przed tagiem dla 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>

Zainicjuj obiekt StreamManager i wyślij żądanie strumienia

Aby poprosić o zestaw reklam, utwórz ima.dai.api.StreamManager, który odpowiada za wysyłanie żądań strumieni DAI i zarządzanie nimi. Konstruktor pobiera element wideo, a wystąpienie go wykorzystuje element interfejsu reklamy do obsługi kliknięć reklam.

Następnie zdefiniuj funkcje, które żądają strumieni. Ten przykład obejmuje funkcje przeznaczone zarówno do VOD, jak i transmisji na żywo, które tworzą instancje odpowiednio VODStreamRequest i LiveStreamRequest, a następnie wywołują streamManager.requestStream() z parametrami streamRequest. W przypadku transmisji na żywo musisz też dodać moduł obsługi umożliwiający nasłuchiwanie zdarzeń z metadanymi czasowymi i przekazywanie zdarzeń do StreamManager. Możesz go skomentować lub usunąć znacznik komentarza odpowiednio do swojego przypadku użycia. Obie metody wymagają opcjonalnego klucza interfejsu API. Jeśli korzystasz ze strumienia chronionego, musisz utworzyć klucz uwierzytelniania DAI.

Żaden strumień w tym przykładzie nie jest chroniony, więc zasada apiKey nie jest używana.

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);
}

Obsługuj zdarzenia strumienia

Na koniec musisz wdrożyć detektory dla najważniejszych zdarzeń wideo. Ten prosty przykład obsługuje zdarzenia LOADED, ERROR, AD_BREAK_STARTED i AD_BREAK_ENDED przez wywołanie funkcji onStreamEvent(). Ta funkcja obsługuje wczytywanie strumienia i błędów, a także wyłączanie elementów sterujących odtwarzaczem, co jest wymagane przez pakiet SDK. Po wczytaniu strumienia odtwarzacz wczytuje i odtwarza podany adres URL za pomocą funkcji loadUrl().

Możesz też skonfigurować detektory zdarzeń pause i start elementu wideo, aby umożliwić użytkownikom wznawianie odtwarzania w przypadku wstrzymania odtwarzania treści IMA w czasie przerw na reklamę.

Aby działał z DAI, odtwarzacz niestandardowy musi przekazywać zdarzenia ID3 w przypadku transmisji na żywo do pakietów IMA DAI SDK zgodnie z przykładowym kodem.

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';
  }
}

Znakomicie. Zamawiasz i wyświetlasz reklamy za pomocą pakietu IMA DAI SDK. Więcej informacji o bardziej zaawansowanych funkcjach pakietu SDK znajdziesz w innych przewodnikach lub w przykładach na GitHubie.