Affectation d'une vidéo au lecteur par programme

Dans cette rubrique, vous apprendrez à modifier dynamiquement la vidéo dans le lecteur. Pour ce faire, vous allez modifier par programme les instances du lecteur. Ce document présente différentes approches pour changer la vidéo dans le lecteur.

Définir l'ID vidéo via l'URL

Il est possible d'utiliser l'implémentation d'URL et de modifier dynamiquement la vidéo qui est lue. Pour ce faire, vous utilisez une chaîne de requête à la fin de l'URL sous la forme ?videoId=YOUR_VIDEO_ID comme indiqué dans l'exemple suivant.

https://players.brightcove.net/..._default/index.html?videoId=2114345471001

Utilisation des ID de référence

Dans tous les exemples de ce document où un ID vidéo est utilisé, un Pièce d'identité peut être remplacé. Si vous utilisez l'ID de référence, vous devez ajouter cet identifiant réf:. Par exemple, la première URL utilise l'ID vidéo, tandis que la seconde utilise l'ID de référence.

https://players.brightcove.net/..._default/index.html?videoId=2114345471001
https://players.brightcove.net/..._default/index.html?videoId=ref:1234abcd

Définir l'ID vidéo via l'attribut de balise

Le code d'intégration de l'encart contient le <video> marque. L'ID Video Cloud de la vidéo est associé au data-video-id HTML 5 Les données attribut.

<video-js
  data-account="1507807800001"
  data-player="dadff0fb-5635-4eac-a1b8-ab8c37a72be9"
  data-embed="default"
  data-video-id="2114345471001"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/dadff0fb-5635-4eac-a1b8-ab8c37a72be9_default/index.min.js"></script>

Remarque : Lorsque le lecteur JavaScript s'exécute, il lit l'ID vidéo à partir du data-video-id attribut. Cependant, il ne le fait qu'au démarrage. Changer la valeur avec, par exemple, JavaScript setAttribute() , n'entraîne pas le chargement de la vidéo par le lecteur. Pour modifier la vidéo après le chargement du lecteur, vous devez utiliser la méthode JavaScript décrite ci-dessous.

Définir la vidéo à l'aide de JavaScript

Dans de nombreux cas, vous voulez que les interactions des utilisateurs contrôlent quelle vidéo est lue. Pour ce faire, vous pouvez utiliser JavaScript et le catalogue de lecteurs getVideo() et load() méthodes pour récupérer et lire dynamiquement la vidéo souhaitée.

Lignes 1 à 10: Code avancé (intégré sur la page) sans valeur pour data-video-id attribut.
Lignes 13 et 19 : Utilisez le ready() méthode pour être sûr que le joueur est prêt à agir.
Ligne 14 : Associez le joueur, appelé this dans la fonction, avec une variable.
Ligne 15,18 : Utilisez le catalogue getVideo() méthode utilisant l'ID Video Cloud et une fonction de rappel comme paramètres.
Ligne 17 : Utilisez le catalogue load() méthode pour charger la vidéo et la lire.

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

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.catalog.getVideo('2114345471001', function(error, video) {
        //deal with error
        myPlayer.catalog.load(video);
      });
    });
  </script>

Définir la vidéo dans iframe

Pour spécifier la vidéo à un lecteur hébergé dans une iframe, vous pouvez transmettre l'ID vidéo (ou l'ID de référence comme mentionné précédemment) via la chaîne de requête d'une URL. Par exemple :

  <iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

Vous pouvez également utiliser JavaScript pour modifier la chaîne de requête de l'iframe src attribut pour indiquer au joueur la nouvelle vidéo à lire.

Lignes 1-4 : Le code d'implémentation iframe. Notez la chaîne de requête (texte après le ? caractère) fournit l'ID de la vidéo à lire.
Ligne 7 : Définissez la fonction à appeler lorsque la vidéo doit changer.
Ligne 8 : Utilisez JavaScript getElementsByTagName() méthode pour placer le <iframe> tag dans une variable. Notez que la méthode renvoie un tableau de tous les éléments correspondants sur la page, et puisque vous utilisez la première (et la seule) balise iframe sur la page, vous pouvez utiliser l'élément zéro du tableau.
Ligne 9 : Crée une chaîne de requête qui remplacera l'ancienne. Ceci définit la nouvelle vidéo à lire.
Ligne 10 : Affecte à une variable le src propriété de la iframe marque.
Ligne 11 : Extrait la source du lecteur, moins l'ancienne chaîne de requête.
Ligne 12 : Construit la nouvelle valeur pour le src propriété en combinant la source du lecteur avec la définition de chaîne de requête de la nouvelle vidéo.
Ligne 13 : Attribue les nouvelles informations de source / vidéo au <iframe> Mots clés src propriété.

<iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

<script type="text/JavaScript">
  function changeVideo() {
    var iframeTag = document.getElementsByTagName("iframe")[0],
      newVideo = "?videoId=3742256815001",
      theSrc = iframeTag.src,
      srcWithoutVideo = theSrc.substring( 0, theSrc.indexOf( "?" ) ),
      newSrc = srcWithoutVideo + newVideo;
    iframeTag.src = newSrc;
  }
</script>