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 transmisji na żywo zarejestrowanych za pomocą interfejsu Google Cloud Video Stitcher API
Z tego przewodnika dowiesz się, jak używać pakietu IMA DAI SDK na potrzeby HTML5, aby żądać i odtwarzać transmisję na żywo wydarzenia zarejestrowanego za pomocą interfejsu Google Cloud Video Stitcher API oraz jak wstawić przerwę na reklamę podczas odtwarzania.
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.
Utwórz konfigurację wydarzenia z transmisją na żywo, używając własnej transmisji na żywo lub testowej transmisji na żywo. Ten przewodnik zakłada strumień HLS.
Wpisz te zmienne, aby używać ich w pakiecie IMA SDK:- Lokalizacja
- Region Google Cloud, w którym została utworzona konfiguracja produkcyjna:
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 danych logowania o ograniczonym czasie ważności dla kont usługi. 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 transmisji na żywo
- Identyfikator konfiguracji transmisji na żywo podany podczas tworzenia wydarzenia z transmisją na żywo:
LIVE_CONFIG_ID - Niestandardowy klucz pliku
- Klucz zasobu niestandardowego w usłudze Ad Manager wygenerowany podczas tworzenia konfiguracji wydarzenia strumieniowego za pomocą interfejsu Video Stitcher API:
CUSTOM_ASSET_KEY
Konfigurowanie środowiska programistycznego
Przykładowe aplikacje IMA demonstrują tylko żądania strumienia HLS. Podczas tworzenia klasy VideoStitcherLiveStreamRequest 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 może prowadzić do nieprawidłowego raportowania zdarzeń reklamy.
Pobierz przykłady IMA DAI dla HTML5 i wyodrębnij plik 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 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, po kliknięciu przycisku odtwarzania w odtwarzaczu rozpocznie się krótki film „Tears of Steel” (Łzy ze stali) po krótkiej reklamie. Treści te są dostarczane za pomocą strumienia wideo na żądanie (VOD).
Prośba o transmisję na żywo
Aby zastąpić przykładowy strumień VOD swoim strumieniem na żywo, użyj klasy VideoStitcherLiveStreamRequest, która automatycznie tworzy sesję reklamową za pomocą Google Ad Managera. W interfejsie Google Ad Managera możesz znaleźć 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 VideoStitcherLiveStreamRequest.
Oto przykład:
// StreamManager which will be used to request ad-enabled 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() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
Jeśli pliki transmisji na żywo znajdują się w zasobniku Cloud Storage, a testy mają być przeprowadzane lokalnie, musisz włączyć dla źródła http://localhost:8000 zasadę CORS.
Odśwież stronę. Następnie możesz poprosić o niestandardowe transmisje na żywo i je 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 VideoStitcherLiveStreamRequest.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);
Wstawianie przerwy na reklamę
Interfejs Google Cloud Video Stitcher API wstawia reklamy pobrane z tagu reklamy na potrzeby każdego przerwania na reklamę. Przerwy na reklamy są oznaczone w pliku manifestu za pomocą znaczników reklam. Znaczniki reklam są wstawiane przez koder transmisji na żywo.
Jeśli używasz własnej transmisji na żywo, musisz wstawić znacznik reklamy. Więcej informacji o obsługiwanych znacznikach reklam HLS i DASH znajdziesz w dokumentacji dotyczącej znaczników reklam.
Jeśli transmisję na żywo utworzono za pomocą interfejsu Google Cloud Livestream API, wstaw przerwę na reklamę.
Reklama jest odtwarzana natychmiast po wstawieniu przerwy na reklamę.
Czyszczenie danych
Po hostowaniu transmisji na żywo za pomocą interfejsu Google Cloud Video Stitcher API i przesłaniu żądania za pomocą pakietu IMA DAI SDK dla HTML5 ważne jest wyczyszczenie wszystkich zasobów służących do obsługi.
Aby usunąć niepotrzebne zasoby i komponenty, postępuj zgodnie z instrukcjami czyszczenia transmisji na żywo.
Na koniec w oknie terminala, w którym uruchomiono serwer WWW Pythona 3, użyj polecenia ctrl+C, aby zamknąć serwer lokalny.