Les SDK IMA facilitent l'intégration d'annonces multimédias dans vos sites Web et vos applications. Les SDK IMA peuvent demander des annonces à n'importe quel ad server conforme à 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 les annonces et le contenu vidéo (VOD ou contenu en direct). Le SDK renvoie ensuite un flux vidéo combiné, ce qui vous évite d'avoir à gérer le passage de l'annonce au contenu vidéo dans votre application.
Sélectionnez la solution d'insertion dynamique d'annonce de votre choix :
- Configurer avec l'insertion dynamique d'annonces à service complet : Google Ad Manager sélectionne et insère les annonces directement dans votre flux de contenu.
- Configurer avec l'insertion dynamique d'annonce pour la diffusion de séries d'annonces : Google Ad Manager fournit des séries d'annonces qui peuvent être assemblées ou chargées dans un lecteur vidéo.
Lire des flux de VOD enregistrés avec l'API Video Stitcher de Google Cloud
Ce guide explique comment utiliser le SDK IMA DAI pour HTML5 afin de demander et de lire une session de flux VOD Google Cloud.
Ce guide développe l'exemple de base du guide de démarrage pour IMA DAI.
Pour en savoir plus sur l'intégration avec d'autres plates-formes ou sur l'utilisation des SDK IMA côté client, consultez SDK Interactive Media Ads.
Pour afficher ou suivre un exemple d'intégration terminé, téléchargez l'exemple Cloud Video Stitcher pour HLS ou DASH.
Configurer un projet Google Cloud
Configurez un projet Google Cloud et des comptes de service pour accéder au projet.
Saisissez les variables suivantes à utiliser dans le SDK IMA :- Emplacement
- La région Google Cloud où votre configuration de VOD a été créée :
LOCATION - Numéro du projet
- Le numéro du projet Google Cloud utilisant l'API Video Stitcher :
PROJECT_NUMBER - Jeton OAuth
Jeton OAuth de courte durée d'un compte de service avec le rôle d'utilisateur Video Stitcher :
OAUTH_TOKEN
En savoir plus sur la création de jetons OAuth éphémères Le jeton OAuth peut être réutilisé pour plusieurs requêtes tant qu'il n'a pas expiré.
- Code de réseau
Code de réseau Ad Manager pour demander des annonces :
NETWORK_CODE
- ID de configuration de VOD
ID de la configuration de VOD pour le flux de VOD :
VOD_CONFIG_IDPour en savoir plus sur la création de l'ID de configuration VOD, consultez le guide de création d'une configuration VOD pour l'assemblage cloud.
Configurer un environnement de développement
Les applications exemples IMA ne présentent que les demandes de flux HLS. Vous pouvez toujours utiliser des flux DASH lors de la construction de la classe VideoStitcherVodStreamRequest. Lorsque vous configurez votre lecteur compatible DASH, vous devez configurer un écouteur pour les événements de progression de votre lecteur vidéo, qui peut fournir les métadonnées de la vidéo à StreamManager.processMetadata().
Cette fonction utilise trois paramètres :
type: chaîne qui doit être définie sur'ID3'pour les flux HLS et'urn:google:dai:2018'pour les flux DASH.data: pour les messages d'événement DASH, il s'agit de la chaîne de données du message.timestamp: nombre correspondant à l'heure de début du message d'événement pour les flux DASH.
Envoyez les métadonnées dès que possible et aussi souvent que vos événements de lecteur le permettent. Si des métadonnées sont manquantes ou incorrectes, le SDK IMA DAI risque de ne pas déclencher d'événements d'annonce, ce qui peut entraîner des erreurs dans les rapports sur les événements d'annonce.
Téléchargez les exemples IMA DAI pour HTML5 et extrayez l'exemple de fichier ZIP hls_js/simple dans un nouveau dossier. Cet exemple est une application Web que vous pouvez héberger localement à des fins de test.
Pour héberger l'exemple localement, accédez au nouveau dossier et exécutez la commande Python suivante pour démarrer un serveur Web :
python3 -m http.server 8000http.server n'est disponible que dans Python 3.x. Vous pouvez utiliser n'importe quel autre serveur Web, tel que le serveur HTTP Apache ou Node.js.
Ouvrez un navigateur Web et accédez à localhost:8000 pour afficher un lecteur vidéo.
Votre navigateur doit être compatible avec la bibliothèque HLS.js.
Si tout fonctionne correctement, cliquer sur le bouton de lecture du lecteur vidéo lance le court-métrage "Tears of Steel", avec des coupures publicitaires toutes les 30 secondes.
Demander un flux de VOD
Pour remplacer l'exemple de flux par votre flux de VOD avec annonces intégrées, utilisez la classe VideoStitcherVodStreamRequest pour créer automatiquement une session publicitaire avec Google Ad Manager. Vous pouvez utiliser l'interface utilisateur de Google Ad Manager pour localiser les sessions d'ID dynamique générées à des fins de surveillance et de débogage.
Dans l'exemple existant, des fonctions permettent de demander un flux de VOD ou un flux en direct. Pour qu'il fonctionne avec l'API Video Stitcher de Google Cloud, vous devez ajouter une fonction permettant de renvoyer un objet VideoStitcherVodStreamRequest.
Exemple :
// StreamManager which will be used to request DAI 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() {
requestVodVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
streamRequest.vodConfigId = 'VOD_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamManager.requestStream(streamRequest);
}
Actualisez la page. Vous pouvez ensuite demander et lire le flux VOD personnalisé.
(Facultatif) Ajouter des options de session de streaming
Personnalisez votre demande de flux en ajoutant des options de session pour remplacer la configuration par défaut de l'API Cloud Video Stitcher à l'aide de VideoStitcherVodStreamRequest.videoStitcherSessionOptions.
Si vous fournissez une option non reconnue, l'API Video Stitcher renvoie une erreur HTTP 400. Pour obtenir de l'aide, consultez le guide de dépannage.
Par exemple, vous pouvez remplacer les options de fichier manifeste par l'extrait de code suivant, qui demande deux fichiers manifestes de flux avec des rendus classés du débit le plus faible au plus élevé.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Effectuer un nettoyage
Maintenant que vous avez hébergé un flux de VOD à l'aide de l'API Video Stitcher de Google Cloud et que vous l'avez demandé à l'aide du SDK IMA DAI pour HTML5, il est important de nettoyer toutes les ressources de diffusion.
Suivez le guide Nettoyage de la VOD pour supprimer les ressources et les éléments inutiles.
Enfin, dans la fenêtre de terminal où vous avez démarré le serveur Web Python 3, utilisez la commande ctrl+C pour arrêter le serveur local.