Cette page a été traduite par l'API Cloud Translation.

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 demander des annonces compatible avec la norme VAST et gérer la lecture des annonces dans vos applications. Avec les SDK IMA DAI, les applications demande de flux pour une annonce et du contenu 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 d'annonces à service complet

Ce guide explique comment intégrer le SDK IMA DAI dans une vidéo simple de votre application. Si vous souhaitez consulter ou suivre un exemple terminé intégration, téléchargez le exemple simple de GitHub.

Présentation de l'insertion dynamique d'annonces IMA

Comme le montre l'exemple de la diapositive, le SDK IMA DAI implique deux composants principaux ce guide:

StreamRequest (VODStreamRequest ou LiveStreamRequest) : Objet qui définit une requête de flux. Les demandes de diffusion peuvent concerner des vidéos à la demande ou des diffusions en direct. flux. Les requêtes spécifient un ID de contenu, ainsi qu'une clé API ou un jeton d'authentification paramètres.
StreamManager: Objet qui gère les flux d'insertion dynamique d'annonces et les interactions avec le backend d'insertion dynamique d'annonce. La Stream Manager gère également les pings de suivi, et transfère les événements de flux et d'annonces au à un éditeur.

Prérequis

Trois fichiers vides
- dai.html
- dai.css
- dai.js
Python installé sur votre ordinateur ou un serveur Web à utiliser pour les tests

Démarrer un serveur de développement

Le SDK IMA DAI charge les dépendances à l'aide du même protocole que celui de la page à partir duquel elle est chargée, vous devez utiliser un serveur Web pour tester votre application. A un moyen rapide de démarrer un serveur de développement local est d'utiliser l'API intégrée de Python Google Cloud.

À l'aide d'une ligne de commande, à partir du répertoire contenant votre fichier index.html exécuter:
```
python -m http.server 8000
```
Remarque :http.server n'est disponible que dans Python 3.x.
Dans un navigateur Web, accédez à http://localhost:8000/

Vous pouvez également utiliser n'importe quel autre serveur Web, tel que le serveur Apache HTTP Google Cloud.

Créer un lecteur vidéo simple

Modifiez d'abord le fichier dai.html pour créer un élément vidéo HTML5 simple et un tag div pour le clic. Ajoutez également les balises nécessaires au chargement du fichier dai.css. et dai.js, ainsi que pour importer le lecteur vidéo hls.js. Ensuite, modifier dai.css pour spécifier la taille et la position des éléments de la page. Enfin, définissez des variables dans dai.js pour contenir la demande de flux. des informations et une fonction initPlayer() à exécuter lors du chargement de la page.

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

Charger le SDK IMA DAI

Ajoutez ensuite le framework IMA en utilisant un tag de script dans le fichier dai.html, avant le tag. pour 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

Pour demander un ensemble d'annonces, créez un ima.dai.api.StreamManager, qui est responsable de la demande et de la gestion des flux pour l'insertion dynamique d'annonce. Le constructeur utilise et l'instance qui en résulte utilise un élément d'UI d'annonce pour gérer l'annonce clics.

Ensuite, définissez des fonctions qui demandent des flux. Cet exemple inclut des fonctions à la fois des VOD et des diffusions en direct, ce qui crée des instances de VODStreamRequest et LiveStreamRequest, respectivement, puis appeler streamManager.requestStream() avec les paramètres streamRequest. Pour les diffusions en direct, vous devez également ajouter pour écouter les événements de métadonnées temporisés et les transférer au StreamManager Vous pouvez commenter le code ou annuler la mise en commentaire pour l'adapter à votre cas d'utilisation. Les deux méthodes nécessitent une clé API facultative. Si vous utilisez un flux protégé, vous besoin de Créez une clé d'authentification pour l'insertion dynamique d'annonce.

Dans cet exemple, aucun des flux n'est protégé. apiKey n'est donc pas utilisé.

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

Gérer les événements de diffusion

Enfin, vous devez implémenter des écouteurs d'événements pour les événements vidéo majeurs. Ce exemple simple gère LOADED, ERROR, AD_BREAK_STARTED et AD_BREAK_ENDED en appelant une fonction onStreamEvent(). Cette fonction gère les erreurs et le chargement du flux, ainsi que la désactivation des commandes du lecteur. pendant la lecture d'une annonce, ce qui est requis par le SDK. Lorsque la diffusion est le lecteur vidéo charge et lit l'URL fournie à l'aide d'un loadUrl() .

Vous pouvez également configurer des écouteurs d'événements pour l'élément pause de l'élément vidéo. et start pour permettre à l'utilisateur de reprendre la lecture lorsque l'IMA s'interrompt pendant les coupures publicitaires.

Pour utiliser l'insertion dynamique d'annonce, votre lecteur personnalisé doit transmettre les événements ID3 pour les diffusions en direct aux SDK IMA DAI, comme indiqué dans l'exemple de code.

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

Et voilà ! Vous demandez et affichez à présent des annonces à l'aide du SDK IMA DAI. À pour en savoir plus sur les fonctionnalités avancées du SDK, consultez les autres guides exemples sur GitHub.