Retarder l'instanciation du joueur

Dans cette rubrique, vous apprendrez à retarder l'instanciation de Brightcove Player lorsqu'une page HTML est parcourue. Les cas d'utilisation où cette technique est utile sont, par exemple, les styles lightbox et les applications Web à page unique où la page avec le lecteur n'est pas initialement instanciée.

Délai d'instanciation

Il existe quelques cas d'utilisation dans lesquels vous souhaiterez utiliser le code d'implémentation du lecteur avancé (intégré dans la page), mais retarder l'instanciation du lecteur. Pour ce faire, vous devez modifier le <videos-js> les attributs de la balise et utilisez le bc() méthode pour initialiser le lecteur. Notez que la méthode peut prendre l'ID du joueur ou l'élément de lecteur lui-même comme argument.

Modifier la balise video-js

Lorsque vous retardez l'instanciation du lecteur, vous NE POUVEZ PAS utiliser tous les <video-js> les attributs de la balise, ou le joueur sera instancié. Vous devez supprimer trois des attributs du code avancé standard (incorporé dans la page). Les attributs qui doivent être supprimés sont:

  • data-account
  • data-player
  • data-video-id

Cela laisse les attributs suivants dans le <video-js> marque:

  • data-embed
  • class
  • controls (optional)

La raison pour laquelle les attributs doivent être supprimés car l'un de ces trois attributs demeure, cela provoquera l'instanciation de Brightcove Player.

Le code avancé utilisé doit être modelé sur l'extrait de code suivant. Notez qu'un id est ajouté à la balise.

<video-js id="myPlayerID"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/5e28670f-28ce-4ed6-8809-227784965834_default/index.min.js"></script>

Ces modifications apportées au code avancé et au code JavaScript ci-dessous fonctionnent ensemble pour retarder l'instanciation du lecteur.

JavaScript utilisé

Une pratique très courante consiste à utiliser un code similaire au suivant pour se préparer à interagir par programmation avec le lecteur:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
});

Cette approche ne peut pas être utilisée car elle instancierait le joueur. Au lieu de cela, vous utiliserez le bc() méthode pour instancier le lecteur APRÈS que d'autres préférences aient été définies. Ce bc() est utilisée pour créer une nouvelle instance de Brightcove Player et est normalement appelée automatiquement lors de l'utilisation de <video-js> tag, à moins que les étapes détaillées ici ne soient suivies.

  • Lignes 2-3 : Déclarez une variable pour le joueur et récupérez l' video-js élément.
  • Lignes 4 à 5 : Utilisez la setAttribute() méthode JavaScript pour définir le data-account et data-player. Ceci est important pour le suivi des analyses et d'autres services.
  • Ligne 6 : Utilise la setAttribute() méthode JavaScript pour définir l'ID vidéo.
  • Ligne 9 : Utilise la bc() méthode pour initialiser le lecteur.
  • Lignes 12-15: Lecture programmatique de la vidéo. En attendant que l' loadedmetadata événement soit distribué, la vidéo a été récupérée par le catalogue avant d'essayer de la lire.
<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>
  • Lignes 2-3 : Déclarez une variable pour le joueur et récupérez l' video-js élément.
  • Lignes 4 à 5 : Utilisez la setAttribute() méthode JavaScript pour définir le data-account et data-player. Ceci est important pour le suivi des analyses et d'autres services.
  • Ligne 8 : Utilise la bc() méthode pour initialiser le lecteur.
  • Ligne 10 : Définit la valeur src pour le joueur. Il est très important de définir à la fois l'objet source src et type pour l'objet source. Des problèmes peuvent survenir dans certains navigateurs si la première option de l'ordre de la technologie de lecture ne correspond pas au type de vidéo.
  • Ligne 13 : Lecture programmatique de la vidéo. Bien sûr, cela n'est pas nécessaire.
<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script> 

Non id sur le joueur

Si, pour une raison quelconque, vous ne souhaitez pas utiliser id avec votre lecteur, vous pouvez utiliser le code suivant pour retarder l'instanciation.

  • Lignes 3 à 4 : Déclarez une variable pour le joueur et récupérez l' video-js élément.
  • Lignes 7 à 8 : Utilisez la setAttribute() méthode JavaScript pour définir le data-account et data-player. Ceci est important pour le suivi des analyses et d'autres services.
  • Ligne 9 : Utilise la setAttribute() méthode JavaScript pour définir l'ID vidéo.
  • Ligne 12 : Utilise la bc() méthode pour initialiser le lecteur.
  • Lignes 15 à 18: Lecture programmatique de la vidéo. En attendant que l' loadedmetadata événement soit distribué, la vidéo a été récupérée par le catalogue avant d'essayer de la lire.
<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>
  • Lignes 3 à 4 : Déclarez une variable pour le joueur et récupérez l' video-js élément.
  • Lignes 7 à 8 : Utilisez la setAttribute() méthode JavaScript pour définir le data-account et data-player. Ceci est important pour le suivi des analyses et d'autres services.
  • Ligne 11 : Utilise la bc() méthode pour initialiser le lecteur.
  • Ligne 13 : Définit la valeur src pour le joueur. Il est très important de définir à la fois l'objet source src et type pour l'objet source. Des problèmes peuvent survenir dans certains navigateurs si la première option de l'ordre de la technologie de lecture ne correspond pas au type de vidéo.
  • Ligne 16 : Lecture programmatique de la vidéo. Bien sûr, cela n'est pas nécessaire.
<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc('vTag');

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script> 

CSAI avec basculement publicitaire SSAI

Lorsque le basculement publicitaire est activé, le Brightcove Player détecte si un bloqueur de publicité est présent dans le navigateur. Sinon, vos publicités côté client (CSAI) sont lues. Si un bloqueur de publicités est détecté, le lecteur demande automatiquement vos publicités côté serveur (SSAI). Pour plus de détails, consultez le SSAI: Détection des blocs publicitaires et basculement automatique document.

Par défaut, appeler le bc() La méthode force le lecteur à s'initialiser immédiatement. Si vous souhaitez utiliser le basculement publicitaire avec le bc() méthode, vous devez attendre que le joueur vérifie si un bloqueur de publicité est présent. Vous pouvez le faire avec le code suivant:

bc.usingAdBlocker().then(function() {
  // The promise callback receives a true/false result, which is stored
  // internally, so future bc() calls will use it. There is no need to
  // handle it yourself.
  //
  // You can pass custom arguments to bc, as normal, if needed.
  bc();
});

Exemple

Voici un exemple de code.

HTML

Ceci est le HTML pour l'exemple.

<video-js id="myPlayerID"
	data-embed="default"
	data-application-id=""	
	controls=""
	width="640"
	height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/W6RmT8TVL_default/index.min.js"></script>

JavaScript

Ceci est le JavaScript pour l'exemple.

<script type="text/javascript">
  // +++ Define the player options +++
  var options = {
    controlBar: {
      volumePanel: {
        inline: false,
        vertical: true
      }
    }
  };

  // +++ Add the player attributes +++
  var myPlayer,
		myPlayerEl = document.getElementById("myPlayerID");
  myPlayerEl.setAttribute('data-account', 1752604059001);
  myPlayerEl.setAttribute('data-player', 'W6RmT8TVL');
  myPlayerEl.setAttribute('data-video-id', 5802784116001);

  // +++ Create the player +++
  bc.usingAdBlocker().then(function() {
    myPlayer = bc(myPlayerEl, options);

    // +++ Optionally, mute and start playback +++
    myPlayer.on('loadedmetadata',function(){
      myPlayer.muted(true);
      myPlayer.play();
    });
  });
</script>