Descripción general: API del reproductor
Haciendo referencia al jugador
Para utilizar las funciones de la API, necesita acceder al objeto del reproductor. Esto es fácil de hacer. Solo necesita asegurarse de que su etiqueta de video tenga una identificación. El código de inserción de ejemplo tiene un ID de myPlayerID
, y el objeto del jugador se mantendrá en el myPlayer
variable. Si tiene varios videos en una página, asegúrese de que cada etiqueta de video tenga una identificación única.
var myPlayer = videojs.getPlayer('myPlayerID');
Método de jugador listo
El tiempo que tarda Video.js en configurar el video y la API variará según varios factores, como la velocidad de conexión. Por esa razón queremos usar el reproductor ready()
método para activar cualquier código que requiera la API del reproductor.
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
// EXAMPLE: Handle an event
myPlayer.on('loadstart',doLoadstart);
});
Reproductor listo frente a video en reproductor listo
Por lo que se ha relacionado en este documento, podría pensar que este es un uso seguro de la API:
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
// Play the video in the player
myPlayer.play()
});
El problema de que el hecho de que el reproductor esté listo para la interacción NO garantiza que el video en el reproductor esté cargado y listo para ser reproducido, en este ejemplo. Por esta razón, tendrá que utilizar el loadedmetadata
evento que garantiza que el video está listo para reproducirse. El código aparecería de la siguiente manera:
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
// Play the video in the player
myPlayer.on('loadedmetadata',function(){
myPlayer.play();
})
});
Si llama al play()
El método es la única tarea a realizar en la función y no vas a interactuar con el jugador de otra manera, este código podría simplificarse a esto (no es necesario usar el ready()
método):
videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
var myPlayer = this;
myPlayer.play();
});
Métodos API
Ahora que tiene acceso a un reproductor listo, puede controlar el video, obtener valores o responder a eventos de video. Los nombres de las funciones de la API de Video.js siguen el API multimedia HTML5. La principal diferencia es que las funciones getter / setter se utilizan para propiedades de video.
// setting a property on a bare HTML5 video element
myVideoElement.currentTime = "120";
// setting a property on a Video.js player
myPlayer.currentTime(120);
La lista completa de eventos y métodos de la API del reproductor se puede encontrar en el documentos de la API del reproductor.