Pakiety IMA SDK ułatwiają integrację reklam multimedialnych z witrynami i aplikacjami. Pakiety IMA SDK mogą żądania reklam z Serwer reklam zgodny i zarządzanie odtwarzaniem reklam w aplikacjach. Dzięki pakietom SDK IMA DAI aplikacje żądania strumieniowego przesyłania danych reklamy i treści wideo – VOD lub treści na żywo. SDK zwraca wtedy typ połączony strumień wideo, dzięki czemu nie trzeba przełączać się między reklamą a treścią wideo. w Twojej aplikacji.
Wybierz rozwiązanie DAI, które Cię interesuje
DAI z pełną obsługą
Ten przewodnik pokazuje, jak zintegrować pakiet IMA DAI SDK w prostym filmie w aplikacji odtwarzacza. Jeśli chcesz zobaczyć gotowy fragment lub zapoznać się z nim należy pobrać prosty przykład z GitHuba.
Omówienie IMA DAI
Implementacja pakietu IMA DAI SDK obejmuje 2 główne komponenty, co pokazujemy ten przewodnik:
StreamRequest
–VODStreamRequest
lubLiveStreamRequest
: Obiekt definiujący żądanie strumienia. Żądania strumienia mogą dotyczyć wideo na żądanie lub na żywo. strumienie. Żądania określają identyfikator treści, a także klucz interfejsu API lub token uwierzytelniania oraz inne dane. .StreamManager
: Obiekt, który obsługuje strumienie dynamicznego wstawiania reklam i interakcje z backendem DAI. zarządza też pingami śledzącymi oraz przekazuje strumienie i zdarzenia reklamowe do wydawcy.
Wymagania wstępne
- 3 puste pliki
- dai.html
- dai.css
- dai.js
- Python zainstalowany na komputerze lub serwer WWW do testowania
Uruchamianie serwera programistycznego
Pakiet IMA DAI SDK wczytuje zależności, korzystając z tego samego protokołu co strona. z którego została wczytana, musisz użyć serwera WWW, aby przetestować aplikację. O szybkim sposobem uruchomienia lokalnego serwera programistycznego jest użycie wbudowanej serwera.
Przy użyciu wiersza poleceń z katalogu zawierającego plik
index.html
. bieg:python -m http.server 8000
W przeglądarce otwórz stronę
http://localhost:8000/
Możesz również użyć dowolnego innego serwera WWW, takiego jak Apache HTTP Serwer.
Utwórz prosty odtwarzacz wideo
Najpierw zmodyfikuj plik dai.html, by utworzyć prosty element wideo HTML5 i element div do
do określania liczby kliknięć. Dodaj też tagi niezbędne do wczytywania pliku dai.css
i dai.js oraz zaimportować odtwarzacz wideo hls.js
. Następnie:
zmień plik dai.css, by określić rozmiar i pozycję elementów strony.
Na koniec w tagu dai.js zdefiniuj zmienne do przechowywania żądania strumienia.
oraz funkcję initPlayer()
uruchamianą po wczytaniu strony.
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
}
Wczytaj pakiet IMA DAI SDK
Następnie dodaj platformę IMA, używając tagu skryptu w witrynie dai.html, przed tagiem. dla dai.js.
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
Zainicjuj obiekt StreamManager i wyślij żądanie strumienia
Aby poprosić o zestaw reklam, utwórz ima.dai.api.StreamManager
, który
odpowiada za żądania strumieni DAI i zarządzanie nimi. Konstruktor pobiera
wideo i wystąpienie przechwytuje reklamę z elementu interfejsu reklamy.
kliknięć.
Następnie zdefiniuj funkcje, które żądają strumieni. Ten przykład obejmuje funkcje:
w treściach VOD i transmisjach na żywo, co tworzy instancje VODStreamRequest
oraz
LiveStreamRequest
, a następnie wywołaj streamManager.requestStream()
z parametrami streamRequest
. W przypadku transmisji na żywo musisz też dodać parametr
nasłuchu zdarzeń metadanych ograniczonych czasowo i przekazuje je do
StreamManager
Możesz go skomentować lub usunąć znacznik komentarza odpowiednio do swojego przypadku użycia.
Obie metody wymagają opcjonalnego klucza interfejsu API. Jeśli korzystasz ze strumienia chronionego,
Trzeba
utworzyć klucz uwierzytelniania DAI.
Żaden strumień w tym przykładzie nie jest chroniony, więc zasada apiKey
nie jest używana.
dai.js
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)
// Timed metadata is only used for LIVE streams.
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in the metadata, 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);
});
}
});
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
// Uncomment the line below and comment out the one above to request a
// LIVE stream instead of a VOD stream.
//requestLiveStream(TEST_ASSET_KEY, null);
}
function requestVODStream(cmsId, videoId, apiKey) {
var streamRequest = new google.ima.dai.api.VODStreamRequest();
streamRequest.contentSourceId = cmsId;
streamRequest.videoId = videoId;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
function requestLiveStream(assetKey, apiKey) {
var streamRequest = new google.ima.dai.api.LiveStreamRequest();
streamRequest.assetKey = assetKey;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
Obsługuj zdarzenia strumienia
Na koniec musisz wdrożyć detektory ważnych zdarzeń wideo. Ten
prosty przykład obsługuje konstrukcje LOADED
, ERROR
, AD_BREAK_STARTED
i
AD_BREAK_ENDED
przez wywołanie funkcji onStreamEvent()
. Ta funkcja
obsługuje wczytywanie strumienia i błędy, a także wyłącza elementy sterujące odtwarzaczem
podczas odtwarzania reklamy, co jest wymagane przez pakiet SDK. Gdy transmisja jest
wczytany, odtwarzacz wczytuje i odtwarza podany URL za pomocą tagu loadUrl()
.
Możesz też skonfigurować odbiorniki zdarzeń pause
elementu wideo
oraz start
, aby umożliwić użytkownikowi wznowienie odtwarzania po wstrzymaniu IMA.
w trakcie przerw na reklamę.
Aby korzystać z DAI, Twój odtwarzacz niestandardowy musi przekazywać zdarzenia ID3 w przypadku transmisji na żywo. do pakietów IMA DAI SDK, jak pokazano w przykładowym kodzie.
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
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);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
Znakomicie. Zamawiasz i wyświetlasz reklamy za pomocą pakietu IMA DAI SDK. Do więcej zaawansowanych funkcji pakietu SDK znajdziesz w innych przewodnikach lub znajdziesz na GitHubie.