Guider: Intégration des partenaires publicitaires

Aperçu

Si votre système publicitaire est conforme à Google IMA3, par exemple, vous n'avez pas besoin de ces informations mais pouvez simplement utiliser le plugin existant pour IMA3, documenté dans le Publicité avec le guide du plugin IMA3.

Si vous avez déterminé que vous avez besoin de cette fonctionnalité, ce contenu explique le cadre de l'API publicitaire nécessaire pour les intégrations publicitaires avec Brightcove Player. Vous pouvez voir deux implémentations de ce framework que Brightcove a produites, celles de Google IMA3 et FreeWheel (documents de référence présentés dans le paragraphe suivant).

Encore une fois, ce document n'est PAS destiné aux clients souhaitant utiliser un cadre publicitaire existant avec leurs vidéos. Les documents les plus adaptés à ces clients sont:

• Publicité avec le plugin IMA3
• Publicité avec le plugin FreeWheel
• Implémentation d'annonces côté serveur avec Brightcove Player

Fonctionnalité du cadre publicitaire

Brightcove fournit un cadre d'API publicitaire comme base pour les plugins publicitaires personnalisés. Le framework fournit des fonctionnalités communes nécessaires aux bibliothèques de publicités vidéo fonctionnant avec Brightcove Player, réduisant ainsi le code que vous devez écrire pour votre intégration publicitaire. Le framework est fourni en tant que projet open source sur lequel vous pouvez construire. Le code du projet est disponible depuis le référentiel GitHub videojs-contrib-ads.

Le cadre publicitaire permet aux partenaires publicitaires de:

• Ayez un contrôle total sur l'expérience publicitaire (c'est-à-dire, l'apparence et le comportement du joueur pendant la lecture des publicités).
• Travaillez avec des serveurs publicitaires personnalisés ou propriétaires.
• Gérez les détails de mise en œuvre des annonces de bas niveau, comme déterminer quand les demandes d'annonces sont effectuées et comment les créations sont mises en mémoire tampon.
• Interagissez facilement avec les fournisseurs d'analyse vidéo et l'écosystème Brightcove Player.

Connaissance de base

Pour utiliser et développer le cadre de l'API publicitaire, vous aurez besoin d'une compréhension approfondie de l'architecture du plugin Brightcove Player. Les documents suivants fournissent ces connaissances:

• Aperçu: Plugins Player
• Transmettre les données au plugin
• Localisation des plugins

Si nécessaire pour vous, un aperçu rapide de la publicité vidéo du point de vue de Brightcove peut être trouvé ici:

• Guide d'apprentissage : Publicité vidéo

Utilisation du framework

Les sections suivantes fournissent des détails sur l'utilisation du framework.

Inclure les ressources du framework

Pour utiliser le plugin, vous devez d'abord vous assurer d'inclure le CSS et JavaScript pour le plugin.

<link rel="stylesheet" href="//mypath/videojs.ads.css">
<script src="//mypath/videojs.ads.js"></script>

Une fois le JavaScript inclus, vous pouvez appeler la fonction pour initialiser le cadre publicitaire.

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
    var myPlayer = this;
    // Initialize the ad framework
    myPlayer.ads();
  });
</script>

Options de configuration

Il existe un certain nombre d'options de configuration disponibles pour le framework. Par exemple, il y a un timeout option. Pour définir cette option, vous utiliserez le code suivant:

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
    var myPlayer = this;
    // Initialize the ad framework
    myPlayer.ads({
      "timeout": 3000
    });
  });
</script>

Ce tableau fournit une liste des options:

Evénements

Les événements suivants sont regroupés en deux types différents. Les groupements et leurs descriptions suivent.

le adstart et adend les événements sont déclenchés par le framework en réponse aux appels de méthode de l'intégrateur publicitaire. Ces événements ne doivent pas être déclenchés directement par l'intégrateur publicitaire.

le adskip et adtimeout Les événements sont des événements facultatifs que l'intégrateur publicitaire peut choisir de déclencher pour indiquer que le joueur doit ignorer une opportunité de pré-roll ou de post-roll.

Paramètres d'exécution

Une fois le plugin initialisé, il existe une propriété que vous pouvez utiliser pour modifier son comportement.

Exemple

Cette section présente un exemple de mise en œuvre avec un échantillon de travail complet.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contrib ads ad plugin</title>
</head>

<body>

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="6077029038001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"></video-js>

  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs.ads.js"></script>

  <script>
    const player = videojs.getPlayer("myPlayerID");
    let creative = '';

    player.ads();

    player.on('contentupdate', function () {

    // Console output
    console.log("### videojs EVENT: contentupdate");

    // can fetch ad inventory here...
    player.setTimeout(() => {
      creative = 'https://solutions.brightcove.com/bcls/ads/bc-ads/bcls-ad-1-8seconds.mp4';
    }, 100);
    player.trigger('adsready');

    // Console output
    console.log("### videojs EVENT: adsready");

    });

    player.on('loadedmetadata', function () {
    // Console output
    console.log("### videojs EVENT: loadedmetadata");
    });

    player.on('readyforpreroll', function () {

      // Console output
      console.log("### videojs EVENT: readyforpreroll");

      player.ads.startLinearAdMode();
      // play your linear ad content
      player.src(creative);
      player.one('durationchange', function () {
        player.play();
      });
      // when ad has finished restore player
      player.one('adended', function () {

        // Console output
        console.log("### videojs EVENT: adended");

        player.ads.endLinearAdMode();
      });
    });

    player.on('ended', function () {
      // Console output
      console.log("### videojs EVENT: ended");
    });
  </script>
</body>

</html>

FAQ