Aperçu: API de lecteur

L'API Brightcove Player vous permet d'interagir avec la vidéo via JavaScript, que le navigateur lise la vidéo via la vidéo HTML5, Flash ou toute autre technologie de lecture prise en charge.

Référencer le joueur

Pour utiliser les fonctions de l'API, vous devez accéder à l'objet lecteur. C'est simple. Vous devez simplement vous assurer que votre tag vidéo possède un identifiant. L'exemple de code d'intégration a un ID de myPlayerID , et l'objet joueur sera conservé dans le myPlayer variable. Si vous avez plusieurs vidéos sur une page, assurez-vous que chaque tag vidéo a un identifiant unique.

var myPlayer = videojs.getPlayer('myPlayerID');

Méthode prête pour le joueur

Le temps nécessaire à Video.js pour configurer la vidéo et l'API varie en fonction de plusieurs facteurs, tels que la vitesse de connexion. Pour cette raison, nous voulons utiliser le lecteur ready() méthode pour déclencher tout code nécessitant l'API du joueur.

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

  // EXAMPLE: Handle an event
  myPlayer.on('loadstart',doLoadstart);

});

Prêt pour le lecteur vs vidéo dans le lecteur prêt

D'après ce qui a été rapporté dans ce document, vous pourriez penser qu'il s'agit d'une utilisation sûre de l'API:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  // Play the video in the player
  myPlayer.play()
});

Le problème selon lequel le simple fait que le lecteur est prêt pour l'interaction ne garantit PAS que la vidéo du lecteur est chargée et prête à être lue, dans cet exemple. Pour cette raison, vous devrez utiliser le loadedmetadata événement qui garantit que la vidéo est prête à être lue. Le code apparaîtrait comme suit:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  // Play the video in the player
  myPlayer.on('loadedmetadata',function(){
    myPlayer.play();
  })
});

Si vous appelez le play() est la seule tâche à effectuer dans la fonction et vous n'allez pas interagir avec le joueur d'une autre manière, ce code pourrait être simplifié à ceci (pas besoin d'utiliser le ready() méthode):

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
  var myPlayer = this;
  myPlayer.play();
});

Méthodes API

Maintenant que vous avez accès à un lecteur prêt, vous pouvez contrôler la vidéo, obtenir des valeurs ou répondre aux événements vidéo. Les noms des fonctions API Video.js suivent les API multimédia HTML5. La principale différence est que les fonctions getter / setter sont utilisées pour les propriétés vidéo.

// setting a property on a bare HTML5 video element
myVideoElement.currentTime = "120";

// setting a property on a Video.js player
myPlayer.currentTime(120);

La liste complète des méthodes et des événements de l'API du lecteur se trouve dans le documentation de l'API player.