Eventos
Todos los eventos que emite el reproductor, con su payload
El reproductor emite sus eventos por el sistema nativo de eventos del navegador, así que los escuchas con addEventListener como cualquier otro evento del DOM.
El tipo de cada evento a continuación es lo que llega en event.detail en el elemento personalizado. En el iframe el detalle nunca incluye el reproductor, así que guarda el de iframe:connected: video:timeupdate y video:pause traen { time }, fullscreen:enter y fullscreen:exit traen { type }, y video:play, video:ended, pitch:time y los eventos smartautoplay:* no traen el reproductor.
Propiedad
Tipo
Registrar un listener
En el elemento personalizado, el reproductor es el objetivo del evento, así que puedes llamar un método directamente desde el listener. En el iframe, guarda la referencia recibida en la conexión:
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:play", (event) => {
console.log("video:play");
// the player reference is available on the event
console.log(event.target);
// use it to call the player methods
event.target.play();
});
En el elemento personalizado la referencia es event.target. En el iframe, event.target es el
elemento <iframe> y el evento no lleva el reproductor: usa el event.detail.player de
iframe:connected, o window.vturbSdk.get(id) después de la conexión.
player:ready
Se dispara una vez que el reproductor está inicializado. Llama métodos solo después: antes, no hacen nada, o lanzan error si el script del reproductor aún no cargó.
Este evento no existe en la incrustación en iframe — allí usa iframe:connected.
const player = document.querySelector("vturb-smartplayer");
// don't call methods before player:ready: they do nothing yet,
// or throw if the player script has not loaded
player.addEventListener("player:ready", (event) => {
// player is ready now
player.fullscreen();
// the event detail carries the config and the player reference
console.log(event.detail.config);
console.log(event.detail.player);
});
iframe:connected
Se dispara cuando el SDK del iframe conecta con el reproductor. El reproductor en iframe no tiene métodos antes de eso.
Se despacha en el elemento <iframe> y sube hasta document, una vez por cada reproductor de la página, así que usa event.detail.id para distinguirlos.
// don't call methods before the connection:
// window.vturbSdk.get("PLAYER_ID") returns undefined until then,
// and window.vturbSdk itself is undefined until the SDK script loads
document.addEventListener("iframe:connected", (event) => {
// identify which player connected
if (event.detail.id !== "PLAYER_ID") return;
const player = event.detail.player;
// the iframe player is connected now
player.fullscreen();
});
// or, listening on the iframe element itself
const iframe = document.getElementById("ifr_PLAYER_ID");
iframe.addEventListener("iframe:connected", (event) => {
const player = event.detail.player;
// do something
});
video:play
Se dispara cuando la reproducción empieza o se reanuda.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:play", () => {
console.log("video:play");
// your code here
});
video:pause
Se dispara cuando la reproducción se pausa.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:pause", () => {
console.log("video:pause");
// your code here
});
video:ended
Se dispara cuando la reproducción llega al final del vídeo.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:ended", () => {
console.log("video:ended");
// your code here
});
video:timeupdate
Se dispara conforme avanza la reproducción, una vez por segundo aproximadamente. El tiempo actual llega en event.detail.time.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:timeupdate", (event) => {
console.log("video:timeupdate", event.detail.time);
// your code here
});
fullscreen:enter
Se dispara cuando el reproductor entra en pantalla completa.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("fullscreen:enter", () => {
console.log("fullscreen:enter");
// your code here
});
fullscreen:exit
Se dispara cuando el reproductor sale de pantalla completa.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("fullscreen:exit", () => {
console.log("fullscreen:exit");
// your code here
});
pitch:time
Se dispara cuando la reproducción alcanza el pitch time configurado para el reproductor.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("pitch:time", () => {
console.log("pitch:time");
// your code here
});
callaction:current-active-items
Se dispara cuando cambia el conjunto de elementos de llamada a la acción activos. event.detail.items trae los elementos visibles y event.detail.type es "delay", "inside" o "outside".
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("callaction:current-active-items", (event) => {
console.log(event.detail.type, event.detail.items);
// your code here
});
smartautoplay:active
Se dispara cuando SmartAutoPlay pasa a estar activo.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:active", () => {
console.log("smartautoplay:active");
// your code here
});
smartautoplay:inactive
Se dispara cuando SmartAutoPlay pasa a inactivo, una vez que el vídeo se ha reproducido con audio — ya sea porque el visitante quitó el silencio o porque lo inició él mismo.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:inactive", () => {
console.log("smartautoplay:inactive");
// your code here
});
smartautoplay:video-ready
Se dispara cuando SmartAutoPlay está listo para reproducir el vídeo.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:video-ready", () => {
console.log("smartautoplay:video-ready");
// your code here
});