Pierwsze kroki z pakietem IMA SDK do dynamicznego wstawiania reklam

Wybierz platformę: HTML5 Android iOS tvOS Cast Roku

Pakiety IMA SDK ułatwiają integrację reklam multimedialnych z witrynami i aplikacjami. Pakiety IMA SDK mogą żądać reklam z dowolnego serwera reklam zgodnego ze specyfikacją VAST i zarządzać odtwarzaniem reklam w aplikacjach. Dzięki pakietom IMA DAI SDK aplikacje wysyłają żądanie strumienia dotyczące reklam i treści wideo – VOD lub treści na żywo. Następnie pakiet SDK zwraca połączony strumień wideo, dzięki czemu nie musisz zarządzać przełączaniem się między reklamą a filmem w aplikacji.

Wybierz preferowane rozwiązanie DAI:

Odtwarzanie strumieni VOD zarejestrowanych za pomocą interfejsu Google Cloud Video Stitcher API

Z tego przewodnika dowiesz się, jak używać pakietu IMA DAI SDK dla HTML5 do wysyłania żądań i odtwarzania sesji strumienia VOD w Google Cloud.

Ten przewodnik rozwija podstawowy przykład z przewodnika dla początkujących dotyczącego IMA DAI.

Informacje o integracji z innymi platformami lub o korzystaniu z pakietów IMA SDK po stronie klienta znajdziesz w artykule Pakiety Interactive Media Ads SDK.

Aby wyświetlić lub prześledzić ukończoną przykładową integrację, pobierz przykład narzędzia do łączenia plików wideo w Cloud dla HLS lub DASH.

Konfigurowanie projektu Google Cloud

Skonfiguruj projekt Google Cloud i konta usługi, aby uzyskać dostęp do projektu.

Wpisz te zmienne do użycia w pakiecie IMA SDK:

Lokalizacja
Region Google Cloud, w którym utworzono konfigurację VOD: LOCATION
Numer projektu
Numer projektu Google Cloud, który korzysta z interfejsu Video Stitcher API: PROJECT_NUMBER
Token OAuth

Krótkotrwały token OAuth konta usługi z rolą użytkownika Video Stitcher: 

OAUTH_TOKEN

Dowiedz się więcej o tworzeniu krótkotrwałych tokenów OAuth. Token OAuth może być używany w wielu żądaniach, dopóki nie wygaśnie.

Kod sieci

Kod sieci Ad Managera do żądania reklam: NETWORK_CODE

Identyfikator konfiguracji VOD

Identyfikator konfiguracji VOD dla strumienia VOD: VOD_CONFIG_ID

Więcej informacji o tworzeniu identyfikatora konfiguracji VOD znajdziesz w przewodniku po tworzeniu konfiguracji VOD w Cloud Stitching.

Konfigurowanie środowiska programistycznego

Przykładowe aplikacje IMA pokazują tylko żądania transmisji HLS. Podczas tworzenia klasy VideoStitcherVodStreamRequest nadal możesz używać strumieni DASH. Podczas konfigurowania odtwarzacza zgodnego z DASH musisz skonfigurować detektor zdarzeń postępu odtwarzacza, który może dostarczać metadane filmu do StreamManager.processMetadata(). Ta funkcja przyjmuje 3 parametry:

  1. type: ciąg znaków, który musi być ustawiony na 'ID3' w przypadku strumieni HLS i 'urn:google:dai:2018' w przypadku strumieni DASH.

  2. data: w przypadku komunikatów o zdarzeniach DASH jest to ciąg danych komunikatu.

  3. timestamp: liczba, która jest czasem rozpoczęcia wiadomości o zdarzeniu w przypadku strumieni DASH.

Wysyłaj metadane tak szybko i tak często, jak to możliwe, na podstawie zdarzeń odtwarzacza. Jeśli brakuje metadanych lub są one nieprawidłowe, pakiet IMA DAI SDK może nie wywoływać zdarzeń reklamowych, co prowadzi do nieprawidłowego raportowania zdarzeń reklamowych.

Pobierz przykłady IMA DAI dla HTML5 i wyodrębnij przykładowy plik ZIP hls_js/simple do nowego folderu. Ten przykład to aplikacja internetowa, którą możesz hostować lokalnie na potrzeby testów.

Aby hostować przykład lokalnie, przejdź do nowego folderu i uruchom to polecenie Pythona, aby uruchomić serwer WWW:

python3 -m http.server 8000

http.server jest dostępny tylko w Pythonie 3.x. Możesz użyć dowolnego innego serwera WWW, takiego jak Apache HTTP Server lub Node JS.

Otwórz przeglądarkę i wejdź na stronę localhost:8000, aby zobaczyć odtwarzacz. Przeglądarka musi obsługiwać bibliotekę HLS.js.

Jeśli wszystko działa prawidłowo, kliknięcie przycisku odtwarzania w odtwarzaczu rozpocznie odtwarzanie krótkiego filmu „Tears of Steel” z przerwami na reklamę co 30 sekund.

Żądanie strumienia VOD

Aby zastąpić przykładowy strumień strumieniem VOD z połączonymi reklamami, użyj klasy VideoStitcherVodStreamRequest, która automatycznie utworzy sesję reklamową w usłudze Google Ad Manager. W interfejsie Google Ad Managera możesz znaleźć wygenerowane sesje DAI, aby je monitorować i debugować.

W istniejącym przykładzie znajdują się funkcje do wysyłania żądań strumienia VOD lub transmisji na żywo. Aby działał on z interfejsem Google Cloud Video Stitcher API, musisz dodać nową funkcję, która zwraca obiekt VideoStitcherVodStreamRequest.

Oto przykład:

// StreamManager which will be used to request DAI streams.
let streamManager;
...

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

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we 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);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Odśwież stronę. Następnie możesz poprosić o niestandardowy strumień VOD i go odtworzyć.

(Opcjonalnie) Dodawanie opcji sesji strumieniowania

Dostosuj żądanie strumienia, dodając opcje sesji, aby zastąpić domyślną konfigurację interfejsu Cloud Video Stitcher API za pomocą VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Jeśli podasz nierozpoznaną opcję, interfejs Cloud Video Stitcher API zwróci błąd HTTP 400. Więcej informacji znajdziesz w przewodniku po rozwiązywaniu problemów.

Możesz na przykład zastąpić opcje pliku manifestu tym fragmentem kodu, który żąda 2 plików manifestu strumienia z wersjami uporządkowanymi od najniższej do najwyższej szybkości transmisji bitów.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Czyszczenie danych

Udało Ci się utworzyć strumień VOD za pomocą interfejsu Google Cloud Video Stitcher API i wysłać do niego żądanie za pomocą pakietu IMA DAI SDK dla HTML5. Teraz musisz wyczyścić wszystkie zasoby wyświetlania.

Postępuj zgodnie z instrukcjami w przewodniku po czyszczeniu VOD, aby usunąć niepotrzebne zasoby i komponenty.

Na koniec w oknie terminala, w którym uruchomiono serwer WWW w Pythonie 3, użyj polecenia ctrl+C, aby zakończyć działanie serwera lokalnego.