Premiers pas avec le SDK IMA DAI

Les SDK IMA facilitent l'intégration d'annonces multimédias dans vos sites Web et applications. Les SDK IMA peuvent demander des annonces à partir de n'importe quel ad server compatible avec la norme VAST et gérer la lecture des annonces dans vos applications. Avec les SDK IMA DAI, les applications envoient une demande de flux pour des annonces et des contenus vidéo (VOD ou en direct). Le SDK renvoie ensuite un flux vidéo combiné pour vous éviter d'avoir à gérer le basculement entre l'annonce et la vidéo de contenu dans votre application.

Sélectionnez la solution d'insertion dynamique d'annonce qui vous intéresse

Insertion dynamique de séries d'annonces

Ce guide explique comment lire un flux utilisant l'insertion dynamique de séries d'annonces pour du contenu en direct ou à la demande, à l'aide du SDK IMA DAI pour HTML5, avec un lecteur vidéo basé sur hls.js pour la lecture. Si vous souhaitez consulter ou suivre un exemple d'intégration terminé, compatible à la fois avec HLS.js et avec la lecture dans Safari, consultez l'exemple de diffusion de pods HLS. Pour en savoir plus sur la compatibilité avec DASH.js, consultez l'exemple de diffusion de séries d'annonces DASH. Vous pouvez télécharger ces exemples d'applications sur la page GitHub consacrée à l'insertion dynamique d'annonces HTML5.

Présentation de l'insertion dynamique de séries d'annonces

La mise en œuvre de la diffusion de séries d'annonces à l'aide du SDK IMA DAI implique deux composants principaux, qui sont illustrés dans ce guide:

• PodStreamRequest/PodVodStreamRequest: objet qui définit une requête de flux envoyée aux serveurs publicitaires de Google. Les requêtes spécifient un code de réseau. Le PodStreamRequest nécessite également une clé d'élément personnalisée et une clé API facultative. Tous deux incluent d'autres paramètres facultatifs.

• StreamManager: objet qui gère la communication entre le flux vidéo et le SDK IMA pour l'insertion dynamique d'annonces, par exemple le déclenchement de pings de suivi et le transfert d'événements de flux à l'éditeur.

Conditions préalables

Avant de commencer, vous avez besoin des éléments suivants :

• Trois fichiers vides:

  • dai.html
  • dai.css
  • dai.js

• Python installé sur votre ordinateur, ou un serveur Web ou un autre environnement de développement hébergé à utiliser pour des tests

Configurer un environnement de développement

Étant donné que le SDK charge les dépendances à l'aide du même protocole que la page à partir de laquelle il est chargé, vous devez utiliser un serveur Web pour tester votre application. Un moyen rapide de démarrer un serveur de développement local consiste à utiliser le serveur intégré de Python.

1. À partir du répertoire contenant votre fichier index.html, exécutez la commande suivante à l'aide d'une ligne de commande:

   python -m http.server 8000
   

2. Dans un navigateur Web, accédez à http://localhost:8000/.

   Vous pouvez également utiliser n'importe quel autre environnement de développement ou serveur Web hébergé, tel que le serveur HTTP Apache.

Créer un lecteur vidéo simple

Tout d'abord, modifiez dai.html pour créer un élément vidéo HTML5 simple et un élément div à utiliser pour les éléments de l'interface utilisateur des annonces. Ajoutez également les balises nécessaires pour charger les fichiers dai.css et dai.js, ainsi que pour importer le lecteur vidéo hls.js.

Ensuite, modifiez le fichier dai.css pour spécifier la taille et la position des éléments de la page. Enfin, dans dai.js, définissez des variables qui contiendront les informations de la demande de flux et une fonction initPlayer() à exécuter lors du chargement de la page.

Les constantes de requête de flux sont les suivantes:

• BACKUP_STREAM: URL d'un flux secondaire à lire si le processus des annonces rencontre une erreur fatale.

• STREAM_URL: utilisé uniquement pour les diffusions en direct URL du flux vidéo fournie par votre outil de manipulation du fichier manifeste ou par un partenaire tiers utilisant la diffusion de séries d'annonces. Vous devez insérer l'ID de flux fourni par le SDK IMA DAI avant d'envoyer une demande. Dans ce cas, l'URL de flux inclut un espace réservé, [[STREAMID]], qui est remplacé par l'ID de flux avant l'envoi d'une requête.

• NETWORK_CODE: code de réseau de votre compte Ad Manager 360.

• CUSTOM_ASSET_KEY: utilisé uniquement pour les diffusions en direct Clé d'asset personnalisée qui identifie votre événement de diffusion de séries d'annonces dans Ad Manager 360. Elle peut être créée par votre outil de manipulation du fichier manifeste ou par un partenaire tiers de diffusion de pods.

• API_KEY: utilisé uniquement pour les diffusions en direct Une clé API facultative qui peut être requise pour récupérer un ID de flux à partir du SDK IMA DAI.

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 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'

// Stream Config.
const STREAM_URL = "https://encodersim.sandbox.google.com/masterPlaylist/...&stream_id=[[STREAMID]]";
const NETWORK_CODE = "51636543";
const CUSTOM_ASSET_KEY = "google-sample";
const API_KEY = "";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

Charger le SDK IMA DAI

Ajoutez ensuite le framework d'insertion dynamique d'annonce à l'aide d'un tag de script dans le fichier dai.html, avant le tag du fichier 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>
...

Initialiser StreamManager et effectuer une requête de flux en direct ou de vidéo à la demande

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestLivePodStream(NETWORK_CODE, CUSTOM_ASSET_KEY, API_KEY);
}

function requestLivePodStream(networkCode, customAssetKey, apiKey) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving live Stream Request
  const streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestVodPodStream(NETWORK_CODE);
}

function requestVodPodStream(networkCode) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving VOD Stream Request
  const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

Gérer les événements de diffusion

var isAdBreak;

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.STREAM_INITIALIZED,
    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.STREAM_INITIALIZED:
      console.log('Stream initialized');
      loadStream(e.getStreamData().streamId);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream('');
      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 loadStream(streamID) {
  var url;
  if(streamID) {
    url = STREAM_URL.replace('[[STREAMID]]', streamID);
  } else {
    console.log('Stream Initialization Failed');
    url = BACKUP_STREAM;
  }
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

var isAdBreak;

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.STREAM_INITIALIZED,
    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.STREAM_INITIALIZED:
      const streamId = e.getStreamData().streamId;
      // 'vtpInterface' is a place holder for your own video technology
      //  partner (VTP) API calls.
      vtpInterface.requestStreamURL({
        'streamId': streamId,
      })
      .then( (vtpStreamUrl) => {
        streamUrl = vtpStreamUrl;
        streamManager.loadStreamMetadata();
      }, (error) => {
        // Handle the error.
      });
      break;
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(streamUrl);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream();
      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 loadStream(url) {
  if(url) {
    console.log('Loading:' + url);
    hls.loadSource(url);
  } else {
    console.log('Stream Initialization Failed');
    hls.loadSource(BACKUP_STREAM);
  }
  hls.attachMedia(videoElement);
}

Gérer les métadonnées de flux

Au cours de cette étape, vous allez implémenter des écouteurs d'événements pour les métadonnées afin d'informer le SDK lorsque des événements d'annonce se produisent. L'écoute des événements de métadonnées InStream peut varier en fonction du format de flux (HLS ou DASH), du type de flux (flux en direct ou de vidéo à la demande), du type de lecteur et du type de backend d'insertion dynamique d'annonces utilisé. Pour en savoir plus, consultez notre guide sur les métadonnées temporelles.

Format de flux HLS (flux en direct et à la demande, lecteur HLS.js)

Si vous utilisez un lecteur HLS.js, écoutez l'événement HLS.js FRAG_PARSING_METADATA pour obtenir les métadonnées ID3 et les transmettre au SDK avec StreamManager.processMetadata().

Pour lire automatiquement la vidéo une fois que tout est chargé et prêt, écoutez l'événement HLS.js MANIFEST_PARSED afin de déclencher la lecture.

function loadStream(streamID) {
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  
  // Timed metadata is passed HLS stream events to the streamManager.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, parseID3Events);
  hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
}

function parseID3Events(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((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
}

function startPlayback() {
  console.log('Video Play');
  videoElement.play();
}

DASH.js (format de flux DASH, type de flux en direct et vidéo à la demande)

Si vous utilisez un lecteur DASH.js, vous devez utiliser différentes chaînes pour écouter les métadonnées ID3 pour les flux en direct ou de vidéo à la demande:

• Diffusions en direct: 'https://developer.apple.com/streaming/emsg-id3'
• Flux de vidéo à la demande: 'urn:google:dai:2018'

Transmettez les métadonnées ID3 au SDK avec StreamManager.processMetadata().

Pour afficher automatiquement les commandes vidéo une fois que tout est chargé et prêt, écoutez l'événement MANIFEST_LOADED DASH.js.

const googleLiveSchema = 'https://developer.apple.com/streaming/emsg-id3';
const googleVodSchema = 'urn:google:dai:2018';
dashPlayer.on(googleLiveSchema, processMetadata);
dashPlayer.on(googleVodSchema, processMetadata);
dashPlayer.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);

function processMetadata(metadataEvent) {
  const messageData = metadataEvent.event.messageData;
  const timestamp = metadataEvent.event.calculatedPresentationTime;

  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with dash.js.
  streamManager.processMetadata('ID3', messageData, timestamp);
}

function loadlistener() {
  showControls();

  // This listener must be removed, otherwise it triggers as addional
  // manifests are loaded. The manifest is loaded once for the content,
  // but additional manifests are loaded for upcoming ad breaks.
  dashPlayer.off(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);
}

Lecteur Shaka avec diffusions en direct (format de flux DASH)

Si vous utilisez le lecteur Shaka pour la lecture du flux en direct, utilisez la chaîne 'emsg' pour écouter les événements de métadonnées. Utilisez ensuite les données du message d'événement de votre appel à StreamManager.onTimedMetadata().

shakaPlayer.addEventListener('emsg', (event) => onEmsgEvent(event));

function onEmsgEvent(metadataEvent) {
  // Use StreamManager.onTimedMetadata() if your video player provides
  // processed metadata, as with Shaka player livestreams.
  streamManager.onTimedMetadata({'TXXX': metadataEvent.detail.messageData});
}

Lecteur Shaka avec flux de vidéo à la demande (format de flux DASH)

Si vous utilisez le lecteur Shaka pour la lecture de flux à la demande, utilisez la chaîne 'timelineregionenter' pour écouter les événements de métadonnées. Utilisez ensuite les données du message d'événement dans votre appel de StreamManager.processMetadata() avec la chaîne 'urn:google:dai:2018'.

shakaPlayer.addEventListener('timelineregionenter', (event) => onTimelineEvent(event));

function onTimelineEvent(metadataEvent) {
  const detail = metadataEvent.detail;
  if ( detail.eventElement.attributes &&
       detail.eventElement.attributes['messageData'] &&
       detail.eventElement.attributes['messageData'].value ) {
        const mediaId = detail.eventElement.attributes['messageData'].value;
        const pts = detail.startTime;
        // Use StreamManager.processMetadata() if your video player provides raw
        // ID3 tags, as with Shaka player VOD streams.
        streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
       }
}

Gérer les événements de joueur

Ajoutez des écouteurs d'événements aux événements pause et start de l'élément vidéo pour permettre à l'utilisateur de reprendre la lecture lorsque le SDK se met en pause pendant les coupures publicitaires.

function loadStream(streamUrl) {
  ...
  
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);
}

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';
  }
}

Et voilà ! Vous demandez et affichez maintenant des annonces dans un flux de diffusion de séries d'annonces avec le SDK IMA DAI pour HTML5. Pour en savoir plus sur les fonctionnalités plus avancées du SDK, consultez les autres guides ou les exemples sur GitHub.