Publicité avec le plugin FreeWheel

Aperçu

Ce plugin active la technologie publicitaire FreeWheel pour HTML5 dans Brightcove Player.

Utilisation des versions du plugin

Lorsque vous utilisez le plugin FreeWheel, vous devrez utiliser des URL versionnées.

Pour référence, les versions du plugin sont suivies dans le Référence de version du plug-in document.

Test du serveur publicitaire

La première chose à faire est de vérifier la validité de la balise publicitaire que vous envisagez d'utiliser. Assurez-vous d'avoir copié son URL et naviguez jusqu'à la page suivante : Aperçu des annonces (en cliquant sur ce lien, la page s'ouvrira dans une nouvelle fenêtre ou un nouvel onglet).

Collez l'URL de votre tag d'emplacement publicitaire dans le champ de saisie du formulaire indiqué. Cliquez sur OPEN IN AD PREVIEWER. Un popup intitulé Open In Ad Previewer s'affiche, puis cliquez sur le OPEN bouton pour tester votre annonce. Cliquez sur PLAY et, si elle fonctionne correctement, votre annonce s'affichera entrecoupée d'une vidéo. Si votre balise publicitaire ne fonctionne pas dans cet environnement de test, elle ne fonctionnera pas avec Brightcove Player.

Utilisation de l'URL correcte du SDK

Les deux sections suivantes proposent des alternatives à l'implémentation de FreeWheel. Dans les deux sections, vous utiliserez un sdkurl. Dans le passé, vous pouviez simplement utiliser http://adm.fwmrm.net/p/[]/AdManager.js pour la valeur de l'option, et sachez qu'elle pointerait vers la dernière version du SDK FreeWheel. Vous devrez maintenant entrer une URL pointant vers une version spécifique, comme https://mssl.fwmrm.net/libs/adm/6.24.0/AdManager.js. en plus , après la configuration initiale, vous devrez également mettre à jour cette valeur lorsqu'une version plus récente du SDK est publiée par FreeWheel, si vous souhaitez utiliser la dernière version. Notez qu'après avoir effectué cette modification, vous devrez republier votre Brightcove Player.

Si vous ne mettez pas à jour l'URL et continuez à utiliser l'URL de mise à jour automatique, vous pointerez toujours vers la version 6.23.

Vous voudrez peut-être gérer votre propre version SDK dans leur intégration Brightcove Player. Cela implique de passer l' Html5.sdkurl option au plugin FreeWheel :

player.FreeWheelPlugin({
  Html5: {
    sdkurl: 'preferred-sdk-url'
  }
});

Implémenter avec le module Players

Pour implémenter le plugin FreeWheel à l'aide du module Players, procédez comme suit:

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 FreeWheelPlugin.
6. Pour le JavaScript URL, saisissez :

   https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js

7. Pour le CSS URL, saisissez :

   https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css

8. Entrez les options de configuration dans la zone de texte Options (JSON) . Les options fournies dans le formulaire configurent la technologie de lecture où Flash et Html5 les sections de configuration sont fournies par FreeWheel. Une configuration complète légèrement modifiée (pour des raisons de sécurité) est illustrée ci-dessous . Un exemple stub est montré ici :

   {
     "Html5": {
       "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
       "serverUrl": "http://cue.v.fwmrm.net/..."
       "profile": "3aaa_profile",
       ...
     }
   }

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.

Implémenter à l'aide

Pour implémenter un plugin, le lecteur doit connaître l'emplacement du code du plugin, une feuille de style si nécessaire, le nom du plugin et les options de configuration du plugin. L'emplacement du code et de la feuille de style du plugin est le suivant :

https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js
https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css

Le nom du plugin est FreeWheelPlugin. Les options configurent la technologie de lecture où Flash et Html5 les sections de configuration sont fournies par FreeWheel. Une configuration complète légèrement modifiée (pour des raisons de sécurité) est illustrée ci-dessous . Un exemple stub est montré ici :

{
  Html5: {
    sdkurl: "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
    serverUrl: "http://cue.v.fwmrm.net/..."
    profile: "3aaa_profile",
    ...
}

Ce qui suit montre l'utilisation de l'implémentation In-Page Embed du lecteur pour associer le plug-in FreeWheel à une seule instance d'un lecteur.

• Ligne 90: link Utilise une balise pour inclure le CSS head du plugin dans la page HTML.
• Ligne 92: Donne à la video balise un id attribut, avec une certaine valeur, dans ce cas myPlayerID.
• Ligne 100: script Utilise une balise pour inclure le JavaScript body du plugin dans la page HTML.
• Lignes 105-125: Initialisez le plugin et transmettez les options personnalisées.
• Ligne 107: Crée une référence au lecteur.

<link href="https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.css" rel="stylesheet">

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  controls=""
  data-video-id="4607746980001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

<script src="https://players.brightcove.net/videojs-freewheel/3/videojs-freewheel.min.js"></script>

<script>
  var myPlayer;

  videojs.getPlayer('myPlayerID').ready(function() {
    // get a reference to the player
    myPlayer = this;

    // initialize the FreeWheel plugin
    myPlayer.FreeWheelPlugin({
      Html5: {
        sdkurl: "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
        serverUrl: "http://cue.v.fwmrm.net/..."
        profile: "3aaa_profile",
        ...
      }
    });
  });
</script>

Configuration

Les paramètres suivants sont utilisés pour configurer le plugin FreeWheel:

• :adTechOrder
  • Type: Array Valeur par défaut : ["html5"]
  • Le tableau contient les technologies d'intégration d'annonces à essayer d'utiliser, par ordre de priorité décroissante.
• :Flash
  • Type: Object
  • Objet pour la configuration FreeWheel spécifique à la technologie (fournie par FreeWheel). L'objet contient les options suivantes :
  • :swfurl
    • Type: string Valeur par défaut: https://players.brightcove.net/videojs-freewheel/3/videojs.freewheel.swf (compatible avec FW Flash SDK v6.4.6)
    • Des valeurs facultatives peuvent être utilisées en fonction de la version du plugin FreeWheel Flash. Ces valeurs se trouvent dans le Using versions of the plugin section vers le haut de ce document.
    • Il doit s'agir d'une propriété enfant de l' Flash objet. Cela sera directement appliqué à l'élément objet si la technologie publicitaire Flash est utilisée.
  • :autoplay
    • Type: boolean Valeur par défaut : true
    • Indique si le contenu est lu automatiquement.
    • Il doit s'agir d'une propriété enfant de l' Flash objet. Cela sera directement appliqué à l'élément objet si la technologie publicitaire Flash est utilisée.
  • :unattendedPlay
    • Type: boolean Valeur par défaut : false
    • Quand autoPlay est défini sur true, unattendedPlay indique si l'utilisateur est conscient de la lecture automatique.
    • Il doit s'agir d'une propriété enfant de l' Flash objet. Cela sera directement appliqué à l'élément objet si la technologie publicitaire Flash est utilisée.
  • visitorCustomId:
    • Type: string Valeur par défaut : unset
    • Permet aux éditeurs de transmettre un identifiant de visiteur personnalisé pour la demande d'annonce. Lorsqu'elle est définie, cette valeur sera transmise dans le bloc visiteur de la charge utile de la requête comme customId="CustomID_001". L'identifiant sera renvoyé dans la réponse à la demande d'annonce dans la balise visiteur d'ouverture en tant qu'attribut: customId="CustomID_001".
    • Il doit s'agir d'une propriété enfant de l' Flash objet. Cela sera directement appliqué à l'élément objet si la technologie publicitaire Flash est utilisée.
• :Html5
  • Type: Object
  • Objet pour la configuration FreeWheel spécifique à la technologie (fournie par FreeWheel). L'objet contient les options suivantes :
  • :autoPlayType
    • Type: integer Valeur par défaut : 1
    • Indique que le contenu vidéo sera lu automatiquement et que l'utilisateur est conscient que le contenu est en cours de lecture automatique.
    • Les valeurs transmises à autoPlayType définissent des indicateurs dans l'URL de demande d'annonce envoyée au serveur publicitaire FreeWheel et peuvent être l'une des trois valeurs entières qui correspondent aux constantes du SDK FreeWheel associées:
      • :1: tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_ATTENDED Veux dire autoPlay est true et unattendedPlay est false. Cela définit flag = +play-uapl.
      • 2: tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_UNATTENDED: veux dire autoPlay est true et unattendedPlay est aussi true. Cela définit flag = +play+uapl.
      • 3: tv.freewheel.SDK.VIDEO_ASSET_AUTO_PLAY_TYPE_NONE: veux dire autoPlay est false et unattendedPlay est unset. Cela définit flag = -play.
    • Il doit s'agir d'une propriété enfant de l' Html5 objet. Cela sera directement appliqué à l'élément objet si la technologie publicitaire Html5 est utilisée.
  • visitorCustomId:
    • Type: string Valeur par défaut : (optional)
    • le visitorCustomId Cette option permet aux éditeurs de transmettre un identifiant de visiteur personnalisé pour la demande d'annonce. Lorsqu'elle est définie, cette valeur sera transmise dans l'URL de demande d'annonce en tant que queryString vcid=CustomID_001. L'identifiant sera renvoyé en réponse à la demande d'annonce dans le bloc JSON visiteur comme "customId" : "CustomID_001".
    • Il doit s'agir d'une propriété enfant de l' Html5 objet. Cela sera directement appliqué à l'élément objet si la technologie publicitaire Html5 est utilisée.
  • :subsessionToken
    • Type: int Valeur par défaut : (optional)
    • le subsessionToken L'option permet aux éditeurs de démarrer une sous-session avec le jeton donné. Une fois définie, cette valeur est transmise dans l'URL de la demande d'annonce en tant que QueryString :

      ssto=1234567890

    • Il doit s'agir d'une propriété enfant de l' Html5 objet. Cela sera directement appliqué à l'élément objet si la technologie publicitaire Html5 est utilisée.
  • :compatibleDimensions
    • Type: array Valeur par défaut : (optional)

    • le compatibleDimensions L'option permet aux éditeurs de transmettre un tableau de dimensions compatibles. Par exemple :

      compatibleDimensions: [ {width: A, height: B}, {width: X, height: Y} ]

      Une fois définie, cette valeur est transmise dans l'URL de la demande d'annonce en tant que QueryString :

      cd=widthA,heightA|widthX,heightY

    • Il doit s'agir d'une propriété enfant de l' Html5 objet. Cela sera directement appliqué à l'élément objet si la technologie publicitaire Html5 est utilisée.
• :loadWithCookie
  • Type: boolean Valeur par défaut : false
  • Active ou désactive les cookies pour les demandes VAST.
• :requestAdsMode
  • Type: string Valeur par défaut : onload
  • Les valeurs possibles pour la propriété sont:
    • onload: Les annonces sont demandées lorsque le lecteur est complètement chargé.
    • onplay: Les annonces sont demandées lorsque la lecture de la vidéo commence, qu'elle soit lancée par l'utilisateur ou en lecture automatique.
    • :oncue Les annonces sont demandées à l'heure de début du point de repère. Lorsque vous utilisez cette propriété, notez également:
      • Uniquement fonctionnel lorsque le useMediaCuePoints la propriété est également définie sur true.
      • Les points de repère publicitaire de Video Cloud doivent être définis sur la vidéo de contenu. Voir le Utilisation des points de repère dans le module multimédia document pour obtenir des instructions sur la création de points de repère dans la vidéo de contenu.
      • S'il y a un temporalSlots option sous le Flash ou Html5 properties, le paramètre est ignoré.
• :useMediaCuePoints
  • Type: boolean Valeur par défaut : false
  • Doit être défini sur true pour utiliser les points de repère publicitaire de Video Cloud pour déclencher des annonces. Doit être utilisé avec requestAdsMode: 'oncue' propriété et valeur assignée.

Macros publicitaires

Des macros publicitaires sont disponibles pour faciliter votre travail lors de la configuration de FreeWheel. Les macros publicitaires sont remplacées par les valeurs correspondantes n'importe où dans votre configuration.

Voici la liste complète des variables pour lesquelles des valeurs substituées seront utilisées:

cust_params={mediainfo.ad_keys}

Exemple de configuration

"plugins": [{
  "name": "FreeWheelPlugin",
  "options": {
    "Html5": {
      "keyValues": [{
        "feature": "simpleAds",
        "module": "DemoPlayer"
      }, {
        "feature": "trackingURLs"
      }],
      "networkId": 99999,
      "profile": "global-js",
      "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
      "serverUrl": "http://cue.v.fwmrm.net/ad/h/5",
      "siteSectionCustomId": "your value here",
      "temporalSlots": [{
        "adUnit": "preroll",
        "id": "Preroll_1",
        "timePosition": 0
      }, {
        "adUnit": "postroll",
        "id": "Postroll_1",
        "timePosition": 60
      }, {
        "adUnit": "overlay",
        "id": "Overlay_1",
        "timePosition": 5
      }],
      "videoAssetCustomId": "your value here",
      "videoAssetDuration": 500
    },
    "debug": true,
    "prerollTimeout": 1000,
    "timeout": 5000
  }
}]

Evénements

Le plugin émet certains types d'événements personnalisés lors du chargement, de l'initialisation et de la lecture. Vous pouvez écouter les événements du cadre publicitaire comme vous le feriez pour tout autre événement:

player.on('ads-ad-started', function(event) {
  console.log('event', event);
});

Attribution d'URL de serveur dynamique

Vous pouvez utiliser le fw-before-ad-request événement pour attribuer dynamiquement l'URL du serveur. Vous utiliserez le on() pour écouter la demande d'annonce, puis attribuez l'URL du serveur souhaité. Bien sûr, vous devrez fournir les URL de serveur souhaitées pour les espaces réservés dans le code:

player.on('fw-before-ad-request', function () {
  player.FreeWheelPlugin.settings.Html5.serverUrl = '[your server url]'
  player.FreeWheelPlugin.settings.Flash.serverUrl = '[your server url]'
})

Si vous avez déjà configuré les URL du serveur, le code affiché remplacera la configuration précédente.

Démos

Cette démo jouera un pre-roll, un mid-roll à 5 secondes puis un post-roll. Les adTechOrder est fixé pour html5 d'abord, comme indiqué ici :

"adTechOrder": [
  "html5",
  "flash"
],

commande adtech: html5, flash

Cette démo utilise html5 premier dans le adtechOder.

Voici la configuration réelle utilisée avec le joueur. Notez que cela peut être utilisé pour la options valeur dans Studio.

{
  "Flash": {
    "networkId": 90750,
    "profile": "3pqa_profile",
    "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
    "serverUrl": "//cue.v.fwmrm.net/ad/g/1",
    "siteSectionCustomId": "your value here",
    "swfurl": "https://players.brightcove.net/videojs-freewheel/3/videojs.freewheel.swf",
    "temporalSlots": [{
      "adUnit": "preroll",
      "id": "Preroll_1",
      "timePosition": 0
    }, {
      "adUnit": "postroll",
      "id": "Postroll_1",
      "timePosition": 60
    }, {
      "adUnit": "midroll",
      "id": "Midroll_1",
      "timePosition": 5
    }],
    "videoAssetCustomId": "your value here",
    "videoAssetDuration": 500
  },
  "Html5": {
    "keyValues": [{
      "feature": "simpleAds",
      "module": "DemoPlayer"
    }, {
      "feature": "trackingURLs"
    }],
    "networkId": 96749,
    "profile": "global-js",
    "sdkurl": "https://mssl.fwmrm.net/libs/adm/{LATEST_VERSION}/...",
    "serverUrl": "//demo.v.fwmrm.net/ad/g/1",
    "siteSectionCustomId": "your value here",
    "temporalSlots": [{
      "adUnit": "preroll",
      "id": "Preroll_1",
      "timePosition": 0
    }, {
      "adUnit": "postroll",
      "id": "Postroll_1",
      "timePosition": 60
    }, {
      "adUnit": "midroll",
      "id": "Midroll_1",
      "timePosition": 5
    }],
    "videoAssetCustomId": "your value here",
    "videoAssetDuration": 500
  },
  "adTechOrder": [
    "html5",
    "flash"
  ],
  "debug": true,
  "prerollTimeout": 1000,
  "timeout": 5000
}

Playlist

Cette démo utilise la première configuration HTML avec une playlist. Vous verrez pour chaque vidéo de la playlist un pré-roll, un mid-roll à la marque des 5 secondes et un post-roll.

Bibliothèques publicitaires pour joueurs

Les videojs/videojs-contrib-annonces Le référentiel GitHub contient un plugin qui fournit les fonctionnalités communes nécessaires aux bibliothèques de publicité vidéo fonctionnant avec Brightcove Player. Le plugin fournit des fonctionnalités communes requises par les intégrations de publicités vidéo et prend en charge un certain nombre de préoccupations pour les intégrateurs de publicités, réduisant ainsi le code que vous devez écrire pour l'intégration de vos annonces.

Propriétés

videojs-contrib-ads fournit des propriétés qui peuvent être utiles. Il s'agit de :

Le code suivant illustre l'utilisation des propriétés :

myPlayer.on('ads-ad-started',function( evt ){
  console.log('*****ads-ad-started event passed to event handler', evt);
  console.log('myPlayer.ads.ad.id',myPlayer.ads.ad.id);
  console.log('myPlayer.ads.ad.index',myPlayer.ads.ad.index);
  console.log('myPlayer.ads.ad.duration',myPlayer.ads.ad.duration);
  console.log('myPlayer.ads.ad.type',myPlayer.ads.ad.type);
  setTimeout(function(){
    console.log('****myPlayer.ads.ad.currentTime()',myPlayer.ads.ad.currentTime());
  },500);
  setTimeout(function(){
    console.log('****myPlayer.ads.ad.currentTime()',myPlayer.ads.ad.currentTime());
  },1000);
});

La sortie de la console à partir du code ci-dessus est affichée ici :

Méthodes

videojs-contrib-ads fournit des méthodes qui peuvent être utiles. Il s'agit de :

Paramètres des annonces

Les paramètres publicitaires peuvent être utilisés avec une GET demande adressée au serveur publicitaire FreeWheel.

Problèmes connus

Réutiliser dynamiquement le même lecteur avec FreeWheel

Si vous chargez des vidéos dynamiquement et que vous réutilisez le même lecteur, les paramètres de configuration FreeWheel contiendront les mêmes valeurs que celles définies au moment où le plugin FreeWheel a été instancié, à deux exceptions près. La première exception est si vous utilisez des macros publicitaires. La deuxième exception est que vous pouvez mettre à jour les paramètres en utilisant player.FreeWheelPlugin.settings.Html5 ou player.FreeWheelPlugin.settings.Flash sur un fw-before-ad-request un événement.

Redimensionner le lecteur pendant la lecture de l'annonce

Si le lecteur est redimensionné pendant la lecture de l'annonce ou de la vidéo, le contenu de l'annonce ne sera pas redimensionné à moins que la fonction de dimensions du lecteur ne soit appelée pour redimensionner le lecteur. Le redimensionnement du lecteur à l'aide d'autres méthodes (par exemple: largeur et hauteur du style) ne redimensionnera pas l'annonce.

Lors de l'utilisation player.dimensions(width,height) pour redimensionner le lecteur, vous devrez déclencher le fw-resizeplayer événement afin que le plugin sache que les dimensions ont changé. En effet, certaines annonces VPAID conservent les dimensions par défaut de l'annonce et ne se redimensionnent pas automatiquement lorsque le lecteur est redimensionné.

Voici un exemple :

player.dimensions(960,540);
player.trigger('fw-resizeplayer');

Annonces en superposition

Si le plugin FreeWheel affiche une annonce dans Flash, les annonces en superposition ne sont pas cliquables. Si le plugin FreeWheel rend une annonce en HTML5, les superpositions ne sont pas affichées aux coordonnées correctes. Cliquer sur une annonce en superposition HTML5 ne mettra pas en pause le lecteur de contenu lorsque l'URL de clic est suivie.

FreeWheel en direct

Les publicités FreeWheel dans un flux en direct peuvent être mises en œuvre avec l'aide de Services mondiaux Brightcove (BGS).

VPAID

Il n'est pas possible de reprendre les annonces via les contrôles VPAID si la barre de contrôle des annonces est activée.

Changelog

Voir le Notes de version du plugin FreeWheel.

Pour les versions plus anciennes, consultez le changelog ici.