Konfigurowanie pakietu IMA SDK na potrzeby DAI

Pakiety IMA SDK ułatwiają integrację reklam multimedialnych z witrynami i aplikacjami. Pakiety IMA SDK mogą wysyłać żądania reklam do dowolnego serwera reklam zgodnego z VAST i zarządzać odtwarzaniem reklam w aplikacjach. Za pomocą pakietów IMA DAI SDK aplikacje wysyłają żądanie strumienia reklamy i treści wideo – VOD lub treści na żywo. Pakiet SDK zwraca wtedy połączony strumień wideo, dzięki czemu nie musisz zarządzać przełączaniem między reklamą a treściami wideo w aplikacji.

Wybierz interesujące Cię rozwiązanie DAI

Odtwarzanie strumieni VOD zarejestrowanych w interfejsie Google Cloud Video Stitcher API

Z tego przewodnika dowiesz się, jak za pomocą pakietu IMA DAI SDK dla HTML5 wysyłać żądania sesji strumienia VOD w Google Cloud i odtwarzać je.

Ten przewodnik rozszerza podstawowy przykład z przewodnika dla początkujących dotyczącego dynamicznego wstawiania reklam IMA.

Więcej informacji o integracji z innymi platformami lub o korzystaniu z pakietów IMA SDK po stronie klienta znajdziesz w sekcji Pakiety Interactive Media Ads SDK.

Aby wyświetlić lub śledzić ukończoną przykładową integrację, pobierz przykład Cloud Video Stitcher dla HLS lub DASH.

Konfigurowanie projektu Google Cloud

Skonfiguruj projekt Google Cloud i skonfiguruj 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 utworzono konfigurację VOD: LOCATION
Numer projektu
Numer projektu Google Cloud używany w interfejsie 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. Tokena OAuth można używać w wielu żądaniach, dopóki nie wygaśnie.

Kod sieci

Kod sieci Ad Managera do wysyłania żądań reklam:NETWORK_CODE

Identyfikator konfiguracji VOD

Identyfikator konfiguracji VOD w przypadku 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 pokazują tylko żądania transmisji 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 wideo, który może przekazywać metadane filmu do StreamManager.processMetadata(). Ta funkcja przyjmuje 3 parametry:

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

  2. data: w przypadku wiadomości o zdarzeniach DASH jest to ciąg danych wiadomości.

  3. timestamp: liczba będąca czasem rozpoczęcia wiadomości o wydarzeniu w przypadku strumieni DASH.

Wysyłaj metadane tak szybko i tak często, jak to możliwe w przypadku zdarzeń odtwarzacza. Jeśli metadane są nieprawidłowe lub ich brakuje, pakiet IMA DAI SDK może nie wywoływać zdarzeń związanych z reklamami, co prowadzi do nieprawidłowego raportowania tych zdarzeń.

Pobierz przykłady IMA DAI dla HTML5 i wyodrębnij hls_js/simple przykładowy plik ZIP 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 w Pythonie, 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, np. Apache HTTP Server lub Node JS.

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

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

Żądanie strumienia VOD

Aby zastąpić przykładowy strumień strumieniem VOD z wstawionymi reklamami, użyj klasy VideoStitcherVodStreamRequest do automatycznego tworzenia sesji reklamowej w usłudze Google Ad Manager. W interfejsie Google Ad Managera możesz znaleźć wygenerowane sesje DAI, aby je monitorować i debugować.

W dotychczasowym przykładzie znajdują się funkcje żądania strumienia VOD lub transmisji na żywo. Aby działał z interfejsem Google Cloud Video Stitcher API, musisz dodać nową funkcję, która będzie 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 odtwarzanie niestandardowego strumienia VOD.

(Opcjonalnie) Dodaj opcje sesji przesyłania strumieniowego

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 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 tym fragmentem kodu, który wysyła żądanie 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

Po udanym hostowaniu strumienia VOD za pomocą interfejsu Google Cloud Video Stitcher API i wysłaniu żądania za pomocą pakietu IMA DAI SDK dla HTML5 ważne jest, aby usunąć wszystkie zasoby wyświetlania.

Postępuj zgodnie z instrukcjami w przewodniku Usuwanie treści 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.