Inizia a utilizzare l'SDK IMA per DAI

Seleziona la piattaforma: HTML5 Android iOS tvOS Cast Roku

Gli SDK IMA semplificano l'integrazione di 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 stream per gli annunci e i contenuti video, sia VOD che live. L'SDK restituisce quindi uno stream video combinato, in modo che tu non debba gestire il passaggio tra l'annuncio e il video dei contenuti all'interno della tua app.

Seleziona la soluzione DAI che preferisci:

• Configurazione con DAI Full Service: Google Ad Manager seleziona e unisce gli annunci direttamente nello stream di contenuti.
• Configurazione con DAI per la pubblicazione di pod: Google Ad Manager fornisce pod di annunci disponibili per l'unione o il caricamento in un video player.

API Cloud Stitching Live API Cloud Stitching VOD

Riproduci i live streaming registrati con l'API Video Stitcher di Google Cloud

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 della guida introduttiva per IMA DAI.

Per informazioni sull'integrazione con altre piattaforme o sull'utilizzo degli SDK IMA lato client, consulta SDK Interactive Media Ads.

Per visualizzare o seguire un'integrazione di esempio completata, scarica l'esempio di Video Stitcher Cloud per HLS o DASH.

Nota:l'SDK IMA DAI per HTML5 supporta sia gli stream HLS che DASH, ma la riproduzione di ciascuno richiede un media player o un'estensione diversa, come HLS.js o DASH.js, con implementazioni diverse.

Questa guida spiega come configurare HLS.js e l'SDK IMA DAI per riprodurre uno stream HLS, con note importanti sulle differenze di implementazione per DASH.

Consulta l'app di esempio IMA DASH.js per un punto di partenza per l'implementazione degli stream DAI DASH con IMA.

Configura un progetto Google Cloud

Configura un progetto cloud Google e i service account per accedere al progetto.

Crea una configurazione per un evento in live streaming utilizzando il tuo live streaming di contenuti o un live streaming di test. 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 live: LOCATION

Numero progetto

Il numero di progetto Google Cloud che utilizza l'API Video Stitcher: PROJECT_NUMBER

Token OAuth

Un token OAuth di breve durata di un service account con il ruolo utente Video Stitcher:

OAUTH_TOKEN

Scopri di più sulla creazione di credenziali di breve durata per i service account. Il token OAuth può essere riutilizzato in più richieste, purché 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 asset personalizzata di Ad Manager generata durante il processo di creazione di una configurazione per un evento in live streaming con l'API Video Stitcher: CUSTOM_ASSET_KEY

Configura un ambiente di sviluppo

Punto chiave: la classe VideoStitcherLiveStreamRequest di IMA DAI supporta sia gli stream HLS sia gli stream DASH multi-periodo. Le interruzioni pubblicitarie vengono inserite solo tra i periodi DASH.

Le app di esempio IMA mostrano solo le richieste di stream HLS. Puoi comunque utilizzare gli stream DASH durante la creazione della classe VideoStitcherLiveStreamRequest. Quando configuri il player compatibile con DASH, devi configurare un listener per gli eventi di avanzamento del video player che possa fornire i metadati del video a StreamManager.processMetadata(). Questa funzione accetta tre parametri:

1. type: una stringa che deve essere impostata su 'ID3' per gli stream HLS e su 'urn:google:dai:2018' per gli stream DASH.

2. data: per i messaggi di eventi DASH, questa è la stringa di dati del messaggio.

3. timestamp: un numero che indica l'ora di inizio del messaggio di evento per gli stream DASH.

Invia i metadati non appena gli eventi del player li forniscono e con la frequenza con cui li forniscono. Se i metadati mancano o non sono corretti, l'SDK IMA DAI potrebbe non attivare gli eventi annuncio, il che comporta una generazione di report errata.

Scarica gli esempi di DAI IMA per HTML5 ed estrai l'esempio semplice di 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 a localhost:8000 per visualizzare un video player. Il tuo browser deve supportare la libreria HLS.js.

Se tutto funziona correttamente, facendo clic sul pulsante di riproduzione sul video player, il cortometraggio "Tears of Steel" inizia dopo un breve annuncio di Shorts. Questi contenuti vengono pubblicati utilizzando uno stream video on demand (VOD).

Richiedi un live streaming

Per sostituire lo stream VOD di esempio con il tuo live streaming, utilizza la classe VideoStitcherLiveStreamRequest, che crea automaticamente una sessione annuncio con Google Ad Manager. Puoi utilizzare la UI di Google Ad Manager per individuare le sessioni DAI generate per il monitoraggio e il debug.

Nell'esempio esistente, sono presenti funzioni per richiedere uno stream VOD o un live streaming. Per far sì che funzioni con l'API Video Stitcher di Google Cloud, 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'origine http://localhost:8000.

Ricarica la pagina. In seguito, 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 Video Stitcher risponderà con un errore HTTP 400. Per assistenza, consulta la guida alla risoluzione dei problemi.

Ad esempio, puoi eseguire l'override delle opzioni del manifest con il seguente snippet di codice, che richiede due manifest dello stream con rendition ordinate dal bitrate più basso a quello più alto.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Inserisci un'interruzione pubblicitaria

L'API Video Stitcher di Google Cloud inserisce gli annunci recuperati dal tag annuncio per ogni interruzione pubblicitaria. Le interruzioni pubblicitarie sono indicate nel manifest utilizzando i marcatori di annunci. Gli indicatori di annunci vengono inseriti dal codificatore del live streaming.

• Se utilizzi il tuo live streaming, devi inserire l'indicatore annuncio. Per maggiori informazioni sui marker degli annunci HLS e DASH supportati, consulta la documentazione sui marker degli annunci.

• Se hai creato un live streaming utilizzando l'API Google Cloud Livestream, inserisci un evento di canale di interruzione pubblicitaria.

L'annuncio viene riprodotto immediatamente dopo l'inserimento dell'interruzione pubblicitaria.

Esegui la pulizia

Ora che hai ospitato correttamente un live streaming utilizzando l'API Video Stitcher di Google Cloud e lo hai richiesto utilizzando l'SDK IMA DAI per HTML5, è importante eseguire la pulizia di tutte le risorse di pubblicazione.

Segui la guida alla pulizia del live streaming per rimuovere le risorse e gli 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.