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:
- Konfiguracja z pełną obsługą dynamicznego wstawiania reklam: Google Ad Manager wybiera i wstawia reklamy bezpośrednio do strumienia treści.
- Konfigurowanie z DAI z wyświetlaniem bloków reklamowych: Google Ad Manager udostępnia bloki reklamowe, które można połączyć lub wczytać do odtwarzacza.
odtwarzanie transmisji na żywo zarejestrowanych za pomocą interfejsu Google Cloud Video Stitcher API;
Z tego przewodnika dowiesz się, jak za pomocą pakietu IMA DAI SDK dla HTML5 wysyłać żądania i odtwarzać transmisję na żywo w przypadku wydarzenia zarejestrowanego za pomocą interfejsu Google Cloud Video Stitcher API oraz jak wstawiać przerwę na reklamę podczas odtwarzania.
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 wykonać gotową 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.
Utwórz konfigurację wydarzenia transmitowanego na żywo, korzystając z własnej transmisji na żywo lub transmisji testowej. W tym przewodniku zakładamy, że używasz strumienia HLS.
Wpisz te zmienne do użycia w pakiecie IMA SDK:- Lokalizacja
- Region Google Cloud, w którym utworzono konfigurację transmisji na żywo:
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 danych logowania do kont usługi o ograniczonym czasie ważności. 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 sesji na żywo
- Identyfikator konfiguracji na żywo określony podczas tworzenia wydarzenia z transmisją na żywo:
LIVE_CONFIG_ID - Niestandardowy klucz zasobu
- Niestandardowy klucz zasobu Ad Managera wygenerowany podczas tworzenia konfiguracji wydarzenia transmitowanego na żywo za pomocą interfejsu Video Stitcher API:
CUSTOM_ASSET_KEY
Konfigurowanie środowiska programistycznego
Przykładowe aplikacje IMA pokazują tylko żądania transmisji HLS. Podczas tworzenia klasy VideoStitcherLiveStreamRequest 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:
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.data: w przypadku komunikatów o zdarzeniach DASH jest to ciąg danych komunikatu.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 prosty przykład HLS.js do nowego folderu. Ten przykład to aplikacja internetowa, którą możesz hostować lokalnie do celów testowych.
Aby hostować przykład lokalnie, przejdź do nowego folderu i uruchom to polecenie Pythona, aby uruchomić serwer WWW:
python3 -m http.server 8000http.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 wideo spowoduje rozpoczęcie odtwarzania krótkiego filmu „Tears of Steel” po krótkiej reklamie. Te treści są dostarczane za pomocą strumienia wideo na żądanie (VOD).
Poproś o transmisję na żywo
Aby zastąpić przykładową transmisję VOD transmisją na żywo, użyj klasy VideoStitcherLiveStreamRequest, która automatycznie tworzy 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 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, na potrzeby testów lokalnych musisz włączyć CORS dla punktu początkowego http://localhost:8000.
Odśwież stronę. Następnie możesz poprosić o niestandardowe transmisje na żywo i je odtwarzać.
(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ą VideoStitcherLiveStreamRequest.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);
Wstawianie przerwy na reklamę
Interfejs Google Cloud Video Stitcher API wstawia reklamy pobrane z tagu reklamy w każdej przerwie na reklamę. Przerwy na reklamę są oznaczane 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 znaczników reklam.
Jeśli transmisja na żywo została utworzona za pomocą interfejsu Google Cloud Livestream API, wstaw zdarzenie kanału z przerwą na reklamę.
Reklama jest odtwarzana natychmiast po wstawieniu przerwy na reklamę.
Czyszczenie danych
Teraz, gdy udało Ci się przeprowadzić transmisję na żywo za pomocą interfejsu Google Cloud Video Stitcher API i wysłać żądanie za pomocą pakietu IMA DAI SDK dla HTML5, ważne jest, aby wyczyścić wszystkie zasoby wyświetlania.
Postępuj zgodnie z przewodnikiem po czyszczeniu transmisji na żywo, 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.