Aperçu: API de lecteur
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.