Mise en œuvre de publicités côté serveur avec le lecteur Brightcove

Aperçu

L'insertion publicitaire côté serveur (SSAI) vous permet d'intégrer des publicités dans vos vidéos afin qu'elles ne puissent pas être bloquées par les bloqueurs de publicités dans le navigateur. Livraison dynamique est le système d’acquisition et de livraison de nouvelle génération qui réduit votre empreinte de stockage et emballe dynamiquement les médias.

Par défaut, SSAI fait en sorte que toutes les publicités soient regardées, affichant un compte à rebours des publicités pendant leur lecture. Vous pouvez facilement personnaliser cette fonctionnalité pour ignorer les publicités.

Vous pouvez configurer Brightcove Player pour utiliser des publicités côté client lorsqu'elles ne sont pas bloquées et basculer automatiquement vers SSAI lorsqu'un bloqueur de publicités est détecté. Pour plus d'informations sur l'activation de cette fonctionnalité, consultez le Basculement publicitaire document.

Voici un aperçu vidéo :

Exigences

Pour utiliser SSAI, votre compte Video Cloud doit être configuré pour Dynamic Delivery et activé pour SSAI. Contactez votre responsable de compte pour commencer à utiliser cette fonctionnalité.

Exemple de lecteur

Cet exemple utilise des annonces IMA définies dans un fichier VMAP pour diffuser des annonces côté serveur dans le flux vidéo. Vous devriez voir qu'il existe une annonce pré-roll, mid-roll et post-roll. Le fichier VMAP est défini dans la configuration de l'annonce.

Voir le stylo 18468-plugin-publicité-ssai par Brightcove Learning Services ( bcls1969 ) sur CodePen.

Voir le code source.

Caractéristiques

Brightcove SSAI est un remplacement moderne de la diffusion d'annonces Once UX. Les caractéristiques comprennent:

• Analyse VMAP / VAST plus complète
• Compatibilité totale avec les annonces compagnons VAST
• Nouvelles API pour interagir avec la chronologie et les rouleaux d'annonces linéaires
• Prise en charge des listes de lecture, des macros publicitaires et de FairPlay
• SSAI fonctionne avec des contenus DRM et non-DRM.
• L'un des principaux rôles de la SSAI est d'imposer certains comportements concernant la recherche et les publicités.
• Double prise en charge des VMAP Once UX hérités (à l'aide de l'espace de noms uo) et des nouveaux VMAP de distribution dynamique (à l'aide de l'espace de noms bc)

Commencer

Pour lire des publicités côté serveur à partir de Video Cloud, procédez comme suit:

1. Créer une configuration d'annonce
2. Créer un lecteur Brightcove
3. Implémenter SSAI à l'aide de Studio

C'est ça. Votre Brightcove Player est maintenant configuré pour les publicités côté serveur. Si vous préférez, vous pouvez ajouter SSAI par programmation, comme indiqué dans le Mettre en œuvre SSAI par programmation section.

Créer une configuration d'annonce

La configuration de l'annonce définit divers aspects de la lecture SSAI, y compris les appels publicitaires, les balises et d'autres options de configuration. La réponse de votre annonce peut être des règles de publicité VAST, VMAP ou DFP. Pour créer une configuration d'annonce, procédez comme suit :

1. Dans Video Cloud Studio, développez le ADMINISTRER menu et sélectionnez Paramètres d'annonce côté serveur.

   

2. Ajoutez des informations pour la configuration de votre annonce et sélectionnez sauvegarder.

   

Pour plus de détails, consultez le Configuration des paramètres d'annonce côté serveur document.

Pour créer une configuration d'annonce à l'aide de l'API SSAI, consultez le document API Video Cloud SSAI Ad Config .

Créer un lecteur Brightcove

Créez un nouveau lecteur Brightcove à l'aide de Video Cloud Studio. Pour plus de détails, consultez le Principes de base de Video Cloud: Créer un joueur document.

Implémentation de SSAI à l'aide de Studio

Le moyen le plus simple de configurer votre lecteur pour les publicités côté serveur consiste à utiliser Video Cloud Studio. Une fois que vous avez créé une configuration d'annonce et un lecteur, vous êtes prêt à configurer le lecteur pour SSAI comme suit:

1. Ouvrez le JOUEURS module et localisez le lecteur auquel vous souhaitez ajouter des fonctionnalités publicitaires.
2. Sélectionnez le lien pour que le joueur ouvre ses propriétés.
3. Sélectionnez Publicité dans le menu de navigation de gauche.
4. Cochez la case Activer le côté serveur (SSAI).
5. Du Sélectionnez la configuration menu déroulant, sélectionnez la configuration publicitaire que vous souhaitez associer à ce lecteur.

6. Si vous souhaitez que des superpositions s'affichent sur vos annonces, cochez la case Activer les superpositions d'informations sur les annonces case à cocher. Cela inclut « En savoir plus » et les superpositions de compte à rebours publicitaires.

7. Le formulaire rempli doit ressembler à ceci:

   

8. Sélectionnez Enregistrer.
9. Pour publier le lecteur, sélectionnez Publier et intégrer > Publier les modifications.

Lorsque les modifications apportées aux propriétés publicitaires sont enregistrées, le plugin SSAI est configuré dans le cadre des paramètres du plugin. Le JavaScript et le CSS seront masqués puisque vous les avez ajoutés via le La publicité section.

Lire une vidéo avec des publicités

Toute vidéo que vous récupérez à partir de Video Cloud qui a été ingérée avec Dynamic Delivery inclut les annonces spécifiées dans le fichier VMAP dans la configuration de votre annonce. Notez que la vidéo doit être associée à une piste audio pour que SSAI fonctionne.

Implémentation de SSAI par programmation

Vous pouvez facilement ajouter SSAI à votre lecteur à l'aide de Video Cloud Studio, comme indiqué dans la section précédente. Si vous préférez effectuer cette opération par programme, procédez comme suit:

1. Ajouter le plugin SSAI
2. Associez des publicités à votre lecteur
3. Lire une vidéo avec des publicités

Ajouter le plugin SSAI

Vous pouvez soit ajouter les fichiers du plugin SSAI à votre code HTML, soit l'ajouter à la configuration de votre lecteur comme indiqué ici:

1. Ouvrez le module PLAYERS et créez un nouveau lecteur ou localisez le lecteur auquel vous souhaitez ajouter le plugin.
2. Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
3. Cliquez sur Plugins dans le menu de navigation de gauche.

4. Du Ajouter un plugin liste déroulante, sélectionnez Plugin personnalisé.

   

5. Pour le nom du plugin, entrez ssai.
6. Pour le JavaScript URL, saisissez :

   https://players.brightcove.net/videojs-ssai/1/videojs-ssai.js

7. Pour le CSS URL, saisissez :

   https://players.brightcove.net/videojs-ssai/1/videojs-ssai.css

8. Vous n'avez pas à saisir d'options pour ce plugin.
9. Cliquez sur Save.
10. Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
11. Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

Associez des publicités à votre lecteur

Ensuite, vous allez associer soit votre configuration d'annonce à votre Brightcove Player. Vous pouvez le faire de trois manières:

• Code intégré standard
• Code d'intégration avancé
• Utilisation du catalogue
• Mettre à jour la configuration de votre lecteur

Code d'intégration standard (iframe)

Avec le code d'intégration standard, incluez le adConfigId paramètre de chaîne de requête avec la valeur de votre identifiant de configuration d'annonce:

<iframe src="https://players.brightcove.net/1752604059001/default_default/
index.html?videoId=5625751316001&adConfigId=your ad config id"
	allowfullscreen
  allow="encrypted-media"
	width="640"
	height="360"></iframe>

Code d'intégration avancé

Avec le code d'intégration avancé, incluez le data-ad-config-id attribut avec la valeur de votre identifiant de configuration d'annonce:

<video-js data-video-id="5625751316001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  data-ad-config-id="your ad config id"
  controls=""
  width="640" height="360"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Utilisation du catalogue

Vous pouvez utiliser le player catalog pour associer des publicités à votre vidéo. Le catalogue fonctionne en effectuant deux demandes:

1. Demandez les données vidéo du catalogue du lecteur. Cela inclura une URL VMAP.
2. La source du lecteur est définie avec l'URL VMAP, ce qui déclenche une demande de document VMAP à partir de Dynamic Delivery. La source du lecteur est à nouveau définie avec un document XML VMAP valide.

Lors de l'utilisation du catalog avec SSAI, ajoutez votre identifiant de configuration d'annonce à getVideo() appelez l'API Playback comme suit:

var adConfigId = "your ad config id";
var myPlayer = videojs.getPlayer('myPlayerId');
// If you added the SSAI plugin using the Players module, then the initialization
// step is performed automatically. Uncomment the next line if you
// did not use the Players module.
//myPlayer.ssai();

myPlayer.catalog.getVideo("your video id", function(error, video) {
	if (error) {
		myPlayer.error(error);
	} else {
		myPlayer.catalog.load(video);
	}
}, adConfigId);

Mettre à jour la configuration de votre lecteur

Une autre façon d'associer des publicités consiste à inclure votre identifiant de configuration d'annonce dans la configuration de Brightcove Player. Pour ce faire, vous pouvez utiliser le API de gestion des joueurs comme suit:

1. Utilisez le PATCH commande pour inclure votre ad_config_id. Voici un exemple de mise à jour de votre lecteur à l'aide de cURL:

   curl \
     --header "Content-Type: application/json" \
     --user $EMAIL \
     --request PATCH \
     --data '{
         "ad_config_id" : "$CONFIG_ID"
     }' \
     https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration
   

2. Vous pouvez ensuite publier vos modifications comme suit:

   curl \
     --header "Content-Type: application/json" \
     --user $EMAIL \
     --request POST \
     https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish
   

3. Vérifiez que la configuration de votre lecteur Brightcove comprend ad_config_id mis à votre valeur d'ID de configuration et au plugin ssai avec les fichiers de plugin associés. Pour ce faire, procédez comme suit :

   1. Accédez à votre lecteur dans le module Studio Players. Cliquez sur le lien du nom du joueur pour voir les détails.
   2. Sélectionnez le Code intégré et URL (Aperçu ou Publié fonctionnera). Clique sur le URL du joueur lien.
   3. Dans la barre d'adresse du navigateur, modifiez le index.html à config.json et parcourez la nouvelle URL.

   La configuration de votre lecteur devrait ressembler à ceci:

   {
     "account_id": "1752604059001",
     "ad_config_id": "d6190656-2095-4ff3-8afe-123abcde",
     "compatibility": true,
     "embed_id": "default",
     "player": {
       "template": {
         "name": "single-video-template",
         "version": "6.9.0"
       }
     },
     "player_id": "rJCECV0RZ",
     "player_name": "SSAI Player",
     "plugins": [
       {
         "name": "ssai"
       }
     ],
     "scripts": [
       "https://players.brightcove.net/videojs-ssai/1/videojs-ssai.js"
     ],
     "stylesheets": [
       "https://players.brightcove.net/videojs-ssai/1/videojs-ssai.css"
     ],
     "updated_at": "2017-11-07T16:03:47.161Z",
     "video_cloud": {
       "policy_key": "ABCDE123456789",
       "video": null
     }
   }

Lire une vidéo avec des publicités

Toute vidéo que vous récupérez à partir de Video Cloud qui a été ingérée avec Dynamic Delivery inclut les annonces spécifiées dans le fichier VMAP dans la configuration de votre annonce. Notez que la vidéo doit être associée à une piste audio pour que SSAI fonctionne.

Options

• debug
  • Si true, configure les messages de débogage dans contrib-ads et enregistre les informations supplémentaires en présence de videojs-bc-analytics-logger.
• hideOverlays
  • Si vrai, le compte à rebours et Apprendre encore plus les superpositions de clic ne seront pas affichées pendant la lecture des annonces.
• trackingBeacons
  • Si la valeur est false, les balises de suivi analysées à partir du VMAP pour la vue de l'annonce, l'impression, les quartiles, etc. ne seront pas envoyées.
• timeout
  • Nombre de millisecondes après lequel un XHR pour récupérer un VMAP expirera.

Coiffant

Il existe plusieurs classes HTML utiles appliquées au lecteur par ce plugin qui peuvent être ciblées pour déterminer l'état du plugin.

Méthodes / propriétés

Plusieurs méthodes publiques sont disponibles lors de l'utilisation du plugin SSAI. N'oubliez pas que vous pouvez également utiliser les méthodes de lecture standard.

Pour utiliser les méthodes SSAI, votre code JavaScript devra attendre que le plugin soit chargé, comme indiqué ici:

<script>
	videojs.getPlayer('myPlayerID').ready(function () {
		var myPlayer = this;
		myPlayer.on("loadedmetadata", function () {
			console.log(myPlayer.ssai().currentTimelineState());
		});
	});
</script>

Méthodes d'état de la chronologie

le *TimelineState les méthodes renvoient un TimelineState objet. Un objet d'état de la chronologie est un objet simple avec une interface spécifique qui détaille l'état de lecture d'un flux SSAI à tout moment dans la chronologie absolue.

Le «temps absolu» fait référence à un point dans la chronologie complète d'un flux (avec les publicités et le contenu inclus). Le terme «temps relatif» fait référence au temps relatif au contenu actuel (annonce ou contenu).

contentTimelineState()

• Argument : numérique unique time
• Obtenir l'état de la chronologie au moment du contenu spécifié (contenu, sans compter les annonces). Par exemple, si votre contenu dure 100 secondes, vous pouvez obtenir l'état de la chronologie à mi-chemin du contenu en utilisant:

  contentTimelineState(50)

absoluteTimelineState()

• Argument : numérique unique time
• Obtenir l'état de la chronologie à l'heure absolue spécifiée (contenu + publicités). Par exemple, si votre contenu comprend une annonce pré-roll de 30 secondes, vous pouvez obtenir l'état de la chronologie à 30 secondes de votre contenu en utilisant:

  absoluteTimelineState(50)

Voici une liste de méthodes supplémentaires d'état de la chronologie:

currentTimelineState()
relativeTimelineState()
seekInAbsoluteTime()
seekInRelativeTime()
seekInContentTime()

Propriétés de l'état de la chronologie

Pour obtenir la valeur d'une propriété d'état de la chronologie, vous pouvez utiliser la syntaxe suivante:

myPlayer.ssai().absoluteTimelineState().absoluteDuration;

Voici une liste des propriétés associées au TimelineState objet:

absoluteTime

• Type: Numéro
• Le temps absolu dans le flux.

absoluteDuration

• Type: Numéro
• La durée absolue du flux.

relativeTime

• Type: Numéro
• L'heure du flux par rapport à l'annonce linéaire actuelle ou au contenu lui-même.

relativeDuration

• Type: Numéro
• Durée de l'annonce linéaire actuelle ou du contenu lui-même.

linearAdRoll

• Type: LinearAdRoll
• Objet représentant l'annonce linéaire actuelle pour le temps absolu.

linearAd

• Type: Annonce linéaire
• Objet représentant l'annonce linéaire actuelle pour le temps absolu.

Evénements

À l'heure actuelle, il y a un événement spécifique à SSAI distribué par ce plugin.

bcov-ssai-click-through

• Cet événement est diffusé en interne par le plugin pour indiquer qu'un clic publicitaire a été demandé.

Notes de configuration

1. Le préchargement des annonces ne doit pas être effectué avec SSAI. La raison en est que si vous préchargez, le lecteur signalera une impression publicitaire et probablement les balises du premier quartile avant la lecture de la vidéo. Cela pourrait conduire à des analyses publicitaires inexactes. Si vous configurez SSAI dans Studio, cela se fera automatiquement, mais si vous configurez SSAI manuellement, vous devez être conscient de ce problème.
2. Si le lecteur Web utilise SSAI et que l'une de vos motivations est de contourner les bloqueurs de publicités, vous devez utiliser des balises côté serveur. Les balises côté client ne doivent pas être utilisées car elles seront bloquées.

Glossaire

Ce plugin distingue les concepts de absolu et contenu heure dans un flux SSAI. Les lecteurs vidéo traditionnels n'ont qu'un concept contenu temps; heures entre le début et la fin de l'URI en cours de lecture. Parce qu'un flux SSAI est essentiellement un certain nombre de contenu flux assemblés, nous avons introduit le concept de absolu temps qui prend en compte le flux assemblé complet, y compris les publicités vidéo.

Lorsque vous voyez le préfixe absolu sur une propriété ou une méthode, les heures attendues / renvoyées sont relatives à l'ensemble du flux assemblé. Lorsque vous voyez le préfixe contenu , les temps attendus / renvoyés sont relatifs uniquement à un élément de contenu particulier qui a été assemblé dans le flux (le contenu principal ou une seule publicité linéaire).

• Temps absolu : Fait référence à un point donné dans la chronologie totale d'un flux SSAI. Par exemple, un 14h00 vidéo avec un 0h30 l'annonce pré-roll a une durée absolue totale de 14h30. Le temps absolu de 0:15 est dans le pre-roll et le temps absolu de 0:31 est la première seconde du contenu.

• Temps relatif : Fait référence au temps relatif au bloc de média actuel - contenu ou publicité. Expansion sur ce qui précède, pendant le pré-roll, le temps relatif 0:15 est synonyme du temps absolu de 0:15 , mais le temps absolu 0:31 équivaudrait à un temps relatif de 0:01.

  Généralement, le temps relatif est ce que vous voyez dans l'interface utilisateur du lecteur et une grande partie du travail de ce plugin et du middleware associé consiste à traduire du temps absolu en temps relatif.

• Temps de contenu fait référence à un point dans le temps dans la chronologie du contenu d'un flux SSAI - en ignorant toutes les publicités. Par exemple, une vidéo de 2h00 avec une annonce pré-roll de 0h30 a une durée de contenu de 2h00. Le temps de contenu de 0:15 équivaut à un temps absolu de 0:45 (pré-roll plus 15 secondes).

Problèmes connus

Voici les problèmes connus liés à l'utilisation du plugin SSAI:

• Safari 10/11 affiche parfois la dernière image du postroll à la fin de la vidéo.
• SSAI n'assemblera pas les publicités en superposition dans le flux vidéo.

Remarques

SSAI VOD

• Si vous créez des implémentations personnalisées à partir des réponses de l'API de lecture Brightcove (PAPI), veuillez noter ce qui suit :
  • Avec l'insertion publicitaire côté serveur (SSAI), le manifeste des vignettes se trouve dans le VMAP au lieu de la réponse PAPI.
  • Dans le cas d'un système non-SSAI, le manifeste des vignettes est inclus dans la réponse PAPI.
• Pour une liste des limitations, consultez le Aperçu de la SSAI document.

Le SSAI en direct

• VMAP pour Live SSAI n'est actuellement pas pris en charge.
• SSAI pour la lecture en direct ne nécessite pas le plug-in SSAI, et les fonctionnalités côté client pour la lecture SSAI ne sont pas disponibles pour la lecture en direct.
• Pour obtenir une liste des limitations, consultez le document Brightcove Live API with SSAI .

Comportement du SSAI midroll

• Lorsqu'un utilisateur déplace la tête de lecture au-delà d'une publicité, celle-ci est diffusée avant que le contenu ne reprenne
• Lorsque l'utilisateur déplace la tête de lecture avant la publicité, celle-ci est rejouée

Changelog

Voir le Notes de version du plug-in SSAI.

Pour les notes de version historiques, voir le changelog ici.