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ą żądać reklam z dowolnego serwera reklam zgodnego z VAST i zarządzać odtwarzaniem reklam w aplikacjach. Dzięki pakietom IMA DAI SDK aplikacje wysyłają żądanie strumienia reklamy i treści wideo (VOD lub treści na żywo). Pakiet SDK zwraca następnie połączony strumień wideo, dzięki czemu nie musisz zarządzać przełączaniem się między reklamą a filmem z treściami w aplikacji.

Wybierz interesujące Cię rozwiązanie DAI

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

Ten przewodnik pokazuje, jak używać pakietu IMA DAI SDK dla HTML5 do wysyłania żądań i odtwarzania sesji strumieniowego przesyłania danych VOD w Google Cloud.

Ten przewodnik rozwija podstawowy przykład z przewodnika wdrożeniowego dotyczącego IMA DAI.

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

Aby wyświetlić lub prześledzić przykładową zakończoną integrację, pobierz przykładowy łącznik wideo 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, aby używać ich w pakiecie IMA SDK:

Lokalizacja

Region Google Cloud, w którym została utworzona konfiguracja VOD:LOCATION

Numer projektu

Numer projektu Google Cloud przy użyciu interfejsu Video Stitcher API:PROJECT_NUMBER

Token OAuth

krótkotrwały token OAuth konta usługi z rolą użytkownika łączenia filmów:

OAUTH_TOKEN

Dowiedz się więcej o tworzeniu krótkotrwałych tokenów OAuth. Tokena OAuth można używać wielokrotnie w różnych żądaniach, o ile nie wygasł.

Kod sieci

Kod sieci Ad Managera służący do wysyłania żądań 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 Cloud Stitching dotyczącym tworzenia konfiguracji VOD.

Konfigurowanie środowiska programistycznego

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

type: ciąg znaków, który musi mieć wartość 'ID3' w przypadku strumieni HLS i 'urn:google:dai:2018' w przypadku strumieni DASH.
data: w przypadku wiadomości o wydarzeniu DASH jest to ciąg danych wiadomości.
timestamp: liczba będąca czasem rozpoczęcia wiadomości o zdarzeniu w strumieniu DASH.

Przesyłaj metadane tak szybko i często, jak to tylko pozwalają zdarzenia dotyczące odtwarzania. Jeśli metadane są nieprawidłowe lub ich brakuje, pakiet IMA DAI SDK może nie wywoływać zdarzeń reklamy, co spowoduje nieprawidłowe raportowanie zdarzeń reklamy.

Pobierz przykłady interfejsu IMA DAI dla HTML5 i wyodrębnijhls_js/simple przykładowy plik ZIP do nowego folderu. W tym przykładzie jest 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 python, aby uruchomić serwer WWW:

python3 -m http.server 8000

http.server jest dostępna tylko w Pythonie 3.x. Możesz użyć dowolnego innego serwera WWW, takiego jak serwer WWW Apache czy Node JS.

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

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

Prośba o strumień VOD

Aby zastąpić przykładowy strumień strumieniem VOD z wstawioną reklamą, użyj klasy VideoStitcherVodStreamRequest, aby automatycznie utworzyć sesję reklamową za pomocą Google Ad Manager. W interfejsie Google Ad Managera możesz znajdować wygenerowane sesje DAI, aby je monitorować i debugować.

W dotychczasowej próbce znajdują się funkcje żądania strumienia VOD lub strumienia na żywo. Aby to działało z interfejsem Google Cloud Video Stitcher API, musisz dodać nową funkcję, która zwróci 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 przesłanie strumienia VOD i go odtworzyć.

(Opcjonalnie) Dodawanie opcji sesji przesyłania strumieniowego

Dostosuj żądanie strumienia, dodając opcje sesji, aby zastąpić domyślną konfigurację interfejsu Cloud Video Stitcher API za pomocą interfejsu VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Jeśli podasz niezidentyfikowaną opcję, interfejs Cloud Video Stitcher API odpowie błędem HTTP 400. Więcej informacji znajdziesz w przewodniku na temat rozwiązywania problemów.

Możesz na przykład zastąpić opcje pliku manifestu za pomocą tego fragmentu kodu, który prosi o 2 pliki manifestu strumienia z odtworzeniami uporządkowanymi od najniższego do najwyższego bitrate’u.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Czyszczenie danych

Teraz, gdy udało Ci się hostować strumień VOD za pomocą interfejsu Google Cloud Video Stitcher API i wysłać żądanie za pomocą pakietu IMA DAI SDK dla HTML5, musisz wyczyścić wszystkie zasoby służące do obsługi.

Aby usunąć niepotrzebne zasoby i komponenty, postępuj zgodnie z instrukcjami podanymi w przewodniku Usuwanie zasobów VOD.

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