Gli SDK IMA semplificano l'integrazione degli annunci multimediali nei tuoi siti web e nelle tue app. Gli SDK IMA possono richiedere annunci da qualsiasi ad server conforme a VAST e gestire la riproduzione degli annunci nelle tue app. Con gli SDK IMA DAI, le app inviano una richiesta di streaming per gli annunci e i video di contenuti, sia VOD che dal vivo. L'SDK restituisce quindi un stream video combinato, in modo da non dover gestire il passaggio tra annunci e video di contenuti all'interno della tua app.
Seleziona la soluzione DAI che ti interessa
Riprodurre i live streaming registrati con l'API Google Cloud Video Stitcher
Questa guida mostra come utilizzare l'SDK IMA DAI per HTML5 per richiedere e riprodurre un live streaming per un evento registrato con l'API Google Cloud Video Stitcher e come inserire un'interruzione pubblicitaria durante la riproduzione.
Questa guida amplia l'esempio di base riportato nella guida introduttiva per l'IMA DAI.
Per informazioni sull'integrazione con altre piattaforme o sull'utilizzo degli SDK lato client IMA, consulta SDK Interactive Media Ads.
Per visualizzare o seguire un'integrazione di esempio completata, scarica l'esempio di strumentazione di stitching video di Cloud per HLS o DASH.
Configura un progetto Google Cloud
Configura un progetto Google Cloud e configura gli account di servizio per accedere al progetto.
Crea una configurazione per un evento in live streaming utilizzando il live streaming dei tuoi contenuti o un live streaming di prova. Questa guida prevede uno stream HLS.
Inserisci le seguenti variabili da utilizzare nell'SDK IMA:- Località
- La regione Google Cloud
in cui è stata creata la configurazione attiva:
LOCATION - Numero progetto
- Il numero del progetto Google Cloud che utilizza l'API Video Stitcher:
PROJECT_NUMBER - Token OAuth
Il token OAuth a breve durata di un account di servizio con il ruolo utente Video Stitcher:
OAUTH_TOKEN
Scopri di più sulla creazione di credenziali di breve durata per gli account di servizio. Il token OAuth può essere riutilizzato in più richieste, a condizione che non sia scaduto.
- Codice di rete
Il codice di rete Ad Manager per la richiesta di annunci:
NETWORK_CODE
- ID configurazione live
- L'ID configurazione live specificato durante la creazione dell'evento in live streaming:
LIVE_CONFIG_ID - Chiave asset personalizzata
- La chiave dell'asset personalizzato Ad Manager generata durante la procedura di creazione di una configurazione per un evento in live streaming con l'API Video Stitcher:
CUSTOM_ASSET_KEY
Configurare un ambiente di sviluppo
Le app di esempio IMA mostrano solo le richieste di stream HLS. Puoi comunque utilizzare gli stream DASH per la costruzione della classe VideoStitcherLiveStreamRequest. Quando
configuri il player compatibile con DASH, devi configurare un ascoltatore per gli eventi di avanzamento del
video player che possa fornire i metadati del video a
StreamManager.processMetadata().
Questa funzione accetta tre parametri:
type: una stringa che deve essere impostata su'ID3'per gli stream HLS e su'urn:google:dai:2018'per gli stream DASH.data: per i messaggi di eventi DASH, si tratta della stringa di dati del messaggio.timestamp: un numero che corrisponde all'ora di inizio del messaggio dell'evento per gli stream DASH.
Invia i metadati il prima possibile e con la massima frequenza consentita dagli eventi del player. Se i metadati mancano o non sono corretti, l'SDK IMA DAI potrebbe non attivare gli eventi correlati agli annunci, con conseguente generazione di eventi correlati agli annunci non corretti.
Scarica gli esempi di DAI IMA per HTML5 ed estrai l'esempio semplice HLS.js in una nuova cartella. Questo esempio è un'app web che puoi ospitare localmente a scopo di test.
Per ospitare l'esempio localmente, vai alla nuova cartella ed esegui il seguente comando Python per avviare un server web:
python3 -m http.server 8000
http.server è disponibile solo in Python 3.x. Puoi utilizzare qualsiasi altro server web, come Apache HTTP Server o Node JS.
Apri un browser web e vai alla pagina localhost:8000 per visualizzare un video player.
Il browser deve supportare la libreria HLS.js.
Se tutto funziona correttamente, facendo clic sul pulsante di riproduzione sul video player viene avviato lo short film "Lacrime d'acciaio" dopo un breve annuncio. Questi contenuti vengono pubblicati utilizzando uno stream video on demand (VOD).
Richiedere un live streaming
Per sostituire lo stream VOD di esempio con il tuo live streaming, utilizza la classe
VideoStitcherLiveStreamRequest
che crea automaticamente una sessione di annunci con Google Ad Manager. Puoi
utilizzare l'interfaccia utente di Google Ad Manager per individuare le sessioni DAI generate per il monitoraggio e il debug.
Nel sample esistente sono presenti funzioni per richiedere uno stream VOD o un live streaming. Per farlo funzionare con l'API Google Cloud Video Stitcher, devi
aggiungere una nuova funzione per restituire un
oggetto
VideoStitcherLiveStreamRequest.
Ecco un esempio:
// 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);
}
Per i test locali, se i file del live streaming si trovano in un
bucket Cloud Storage, devi attivare CORS per l'originehttp://localhost:8000.
Ricarica la pagina. Dopodiché, potrai richiedere e riprodurre live streaming personalizzati.
(Facoltativo) Aggiungi opzioni per la sessione di streaming
Personalizza la richiesta di stream aggiungendo opzioni di sessione per eseguire l'override della configurazione predefinita dell'API Cloud Video Stitcher utilizzando
VideoStitcherLiveStreamRequest.videoStitcherSessionOptions.
Se fornisci un'opzione non riconosciuta, l'API Cloud Video Stitcher risponderà con un errore HTTP 400. Per assistenza, consulta la guida alla risoluzione dei problemi.
Ad esempio, puoi sostituire le opzioni manifest con lo snippet di codice seguente, che richiede due manifest di stream con le rappresentazioni ordinate dalla maggiore alla minore velocità in bit.
...
// 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);
Inserire un'interruzione pubblicitaria
L'API Google Cloud Video Stitcher inserisce gli annunci recuperati dal tag annuncio per ogni interruzione pubblicitaria. Le interruzioni pubblicitarie sono indicate nel file manifest utilizzando gli indicatori di annunci. Gli indicatori di annunci vengono inseriti dal codificatore del live streaming.
Se utilizzi il tuo live streaming, devi inserire l'indicatore di annuncio. Per maggiori informazioni sugli indicatori di annunci HLS e DASH supportati, consulta la documentazione sugli indicatori di annunci.
Se hai creato un live streaming utilizzando l'API Live Stream di Google Cloud, inserisci un evento di interruzione pubblicitaria del canale.
L'annuncio viene riprodotto immediatamente dopo l'inserimento dell'interruzione pubblicitaria.
Esegui la pulizia
Ora che hai ospitato un live streaming utilizzando l'API Google Cloud Video Stitcher e lo hai richiesto utilizzando l'SDK IMA DAI per HTML5, è importante ripulire le risorse di pubblicazione.
Segui la guida alla pulizia dei live streaming per rimuovere risorse e asset non necessari.
Infine, nella finestra del terminale in cui hai avviato il server web Python 3, utilizza il comando ctrl+C per terminare il server locale.