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ą żądania reklam z Serwer reklam zgodny i zarządzanie odtwarzaniem reklam w aplikacjach. Dzięki pakietom SDK IMA DAI aplikacje żądania strumieniowego przesyłania danych reklamy i treści wideo – VOD lub treści na żywo. SDK zwraca wtedy typ połączony strumień wideo, dzięki czemu nie trzeba przełączać się między reklamą a treścią wideo. w Twojej aplikacji.

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

DAI z pełną obsługą

Ten przewodnik pokazuje, jak zintegrować pakiet IMA DAI SDK w prostym filmie w aplikacji odtwarzacza. Jeśli chcesz zobaczyć gotowy fragment lub zapoznać się z nim należy pobrać prosty przykład z GitHuba.

Omówienie IMA DAI

Implementacja pakietu IMA DAI SDK obejmuje 2 główne komponenty, co pokazujemy ten przewodnik:

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

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, korzystając z tego samego protokołu co strona. z którego została wczytana, musisz użyć serwera WWW, aby przetestować aplikację. O szybkim sposobem uruchomienia lokalnego serwera programistycznego jest użycie wbudowanej serwera.

Przy użyciu wiersza poleceń z katalogu zawierającego plik index.html. bieg:
```
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 również użyć dowolnego innego serwera WWW, takiego jak Apache HTTP Serwer.

Utwórz prosty odtwarzacz wideo

Najpierw zmodyfikuj plik dai.html, by utworzyć prosty element wideo HTML5 i element div do do określania liczby kliknięć. Dodaj też tagi niezbędne do wczytywania pliku dai.css i dai.js oraz zaimportować odtwarzacz wideo hls.js. Następnie: zmień plik dai.css, by określić rozmiar i pozycję elementów strony. Na koniec w tagu dai.js zdefiniuj zmienne do przechowywania żądania strumienia. oraz funkcję initPlayer() uruchamianą 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 witrynie 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 żądania strumieni DAI i zarządzanie nimi. Konstruktor pobiera wideo i wystąpienie przechwytuje reklamę z elementu interfejsu reklamy. kliknięć.

Następnie zdefiniuj funkcje, które żądają strumieni. Ten przykład obejmuje funkcje: w treściach VOD i transmisjach na żywo, co tworzy instancje VODStreamRequest oraz LiveStreamRequest, a następnie wywołaj streamManager.requestStream() z parametrami streamRequest. W przypadku transmisji na żywo musisz też dodać parametr nasłuchu zdarzeń metadanych ograniczonych czasowo i przekazuje je 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, Trzeba 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 konstrukcje LOADED, ERROR, AD_BREAK_STARTED i AD_BREAK_ENDED przez wywołanie funkcji onStreamEvent(). Ta funkcja obsługuje wczytywanie strumienia i błędy, a także wyłącza elementy sterujące odtwarzaczem podczas odtwarzania reklamy, co jest wymagane przez pakiet SDK. Gdy transmisja jest wczytany, odtwarzacz wczytuje i odtwarza podany URL za pomocą tagu loadUrl() .

Możesz też skonfigurować odbiorniki zdarzeń pause elementu wideo oraz start, aby umożliwić użytkownikowi wznowienie odtwarzania po wstrzymaniu IMA. w trakcie przerw na reklamę.

Aby korzystać z DAI, Twój odtwarzacz niestandardowy musi przekazywać zdarzenia ID3 w przypadku transmisji na żywo. do pakietów IMA DAI SDK, jak pokazano w przykładowym kodzie.

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. Do więcej zaawansowanych funkcji pakietu SDK znajdziesz w innych przewodnikach lub znajdziesz na GitHubie.