Exemple de joueur Brightcove : Lecteur externe (publicité uniquement)

Aperçu

Cet exemple de lecteur de publicité Outstream vous montre comment charger dynamiquement le lecteur Brightcove dans une page Web contenant d'autres éléments non vidéo. L'annonce vidéo est le seul contenu lu par le lecteur. Le lecteur se développe généralement dans la mise en page, comme indiqué dans cet exemple, mais peut également apparaître dans une zone spéciale de la page ou sous forme de superposition. Le lecteur disparaît une fois la lecture de l'annonce terminée.

Exemple de lecteur

Cet exemple fournit des fonctions d'aide JavaScript qui montrent comment ajuster dynamiquement la taille d'un <div> dans le DOM de la page, injectez-y le Brightcove Player, chargez et lisez une annonce, puis supprimez le lecteur. La publicité diffusée est configurée à partir d'une balise publicitaire. Le lecteur est configuré pour la lecture automatique et mis en sourdine par défaut, ce qui est la seule façon dont il fonctionnera dans certains navigateurs. Vous pouvez modifier ces paramètres si vous le souhaitez.

Cet exemple peut être utilisé tel quel ou peut être copié et modifié pour fonctionner avec votre conception de page personnalisée.

Voir le stylo 18065-plugin-ad-only par Brightcove Learning Services (bcls1969 ) sur CodePen.

Code source

Voir le solution complète sur GitHub.

Flux d'application

La logique de base derrière cette application est la suivante :

• Cet exemple montre une page Web de style article texte avec un <div> élément placé dans l'article. Après qu'un minuteur se soit éteint, ce div caché est développé et le lecteur y apparaît.

• Le lecteur utilise une réponse de balise publicitaire VAST pour lire une publicité.
• Lorsque la lecture des publicités est terminée, le lecteur est déchargé et supprimé du DOM.

Configuration du lecteur/HTML

Cette section détaille toute configuration spéciale nécessaire lors de la création du lecteur. En outre, d'autres éléments HTML qui doivent être ajoutés à la page, au-delà du code d'implémentation du lecteur intégré dans la page, sont décrits.

Configuration du lecteur

Aucune configuration spéciale n'est requise pour le lecteur Brightcove que vous créez pour cet exemple.

Autre HTML

Dans votre fichier HTML, vous incluez les éléments suivants:

1. UNE <div> élément avec un id attribut attribué à une valeur de votre choix. Le code JavaScript créera votre Brightcove Player dans ce <div> élément.

   <div id="adPlayerDiv"></div>

2. Le fichier JavaScript associé à votre Brightcove Player. Il devrait ressembler à ceci :

   <script src="https://players.brightcove.net/your account id/default_default/index.min.js"></script>

3. Les fichiers JavaScript et CSS du plugin IMA3. Ceci est destiné à l'intégration d'annonces avec le SDK IMA3 HTML5 de Google.

   <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet"/>
   <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

4. La bibliothèque d'aide nommée adonly.js. Vous pouvez utiliser ce fichier non modifié car il est hébergé à partir de l'origine du lecteur de Brightcove et servi sur CDN. Si vous le souhaitez, vous pouvez utiliser ce code JavaScript comme guide pour créer votre propre script de chargement et l'héberger sur votre propre serveur. Ce fichier peut également être inclus dans la configuration de votre lecteur.

   <script src="https://players.brightcove.net/3723496277001/files/adonly.js"></script>

   Une version minifiée hébergée sur CDN est également disponible si vous choisissez de l'inclure directement dans votre page.

   <script src="https://players.brightcove.net/3723496277001/files/adonly.min.js"></script>

Fonctions publiques

le adonly.js la bibliothèque a deux fonctions publiques qu'elle expose:

• expandAndInjectAdOnlyPlayer(): Développe un <div> et y injecte un lecteur publicitaire uniquement.
• injectAdOnlyPlayer(): Injecte un lecteur publicitaire uniquement dans un <div> (sans animation).

Options

le expandAndInjectAdOnlyPlayer() La fonction prend les paramètres suivants:

• muted
  • Facultatif. Valeurs : vrai, faux. Valeur par défaut : true
• autoplay
  • Facultatif. Valeurs : vrai, faux. Valeur par défaut : true
• adTag
  • Le tag d'emplacement publicitaire
• div
  • La division dans laquelle vous souhaitez que le lecteur d'annonces soit injecté
• height
  • La hauteur en pixels à laquelle vous souhaitez étendre le div
• animationDuration
  • Combien de temps en ms faut-il pour animer l'expansion de la hauteur div

le injectAdOnlyPlayer() La fonction prend les mêmes paramètres sauf pour la hauteur et la durée de l'animation.

Style d'application

Cet exemple utilise le style CSS fourni par le plugin IMA3.

Code du plug-in

Cet exemple utilise du code JavaScript déjà créé en tant que plug-in. Vous pouvez voir ce code dans le référentiel GitHub correspondant de ce document: adonly.js.

Optimisation du temps de chargement

Cet exemple utilise un Brightcove Player et inclut le plug-in IMA pendant l'exécution. Vous pouvez utiliser cet exemple tel quel, mais en modifiant le code de lecteur de votre compte.

Pour optimiser légèrement le temps de chargement, vous devez inclure le plugin IMA dans la configuration du lecteur. Pour ce faire, consultez les documents suivants:

• Plugins de lecteur Brightcove
• Configuration des plugins de lecteur