Eventos
Todos os eventos que o player emite, com seu payload
O player emite seus eventos pelo sistema nativo de eventos do navegador, então você os escuta com addEventListener como qualquer outro evento do DOM.
O tipo de cada evento abaixo é o que chega em event.detail no elemento customizado. No iframe o detalhe nunca inclui o player, então guarde o do iframe:connected: video:timeupdate e video:pause trazem { time }, fullscreen:enter e fullscreen:exit trazem { type }, e video:play, video:ended, pitch:time e os eventos smartautoplay:* não trazem o player.
Propriedade
Tipo
Registrar um listener
No elemento customizado, o player é o alvo do evento, então dá para chamar um método direto do listener. No iframe, guarde a referência recebida na conexão:
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();
});
No elemento customizado a referência é event.target. No iframe, o event.target é o elemento
<iframe> e o evento não carrega o player: use o event.detail.player do
iframe:connected, ou o window.vturbSdk.get(id) depois da conexão.
player:ready
Dispara assim que o player é inicializado. Só chame métodos depois dele: antes disso, eles não fazem nada, ou lançam erro se o script do player ainda não carregou.
Este evento não existe no embed em iframe — lá use o 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
Dispara quando o SDK do iframe conecta ao player. O player em iframe não tem métodos antes disso.
Ele é despachado no elemento <iframe> e sobe até o document, uma vez para cada player da página, então use o event.detail.id para distingui-los.
// 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
Dispara quando a reprodução começa ou é retomada.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:play", () => {
console.log("video:play");
// your code here
});
video:pause
Dispara quando a reprodução é pausada.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:pause", () => {
console.log("video:pause");
// your code here
});
video:ended
Dispara quando a reprodução chega ao fim do vídeo.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:ended", () => {
console.log("video:ended");
// your code here
});
video:timeupdate
Dispara conforme a reprodução avança, cerca de uma vez por segundo. O tempo atual chega em 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
Dispara quando o player entra em tela cheia.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("fullscreen:enter", () => {
console.log("fullscreen:enter");
// your code here
});
fullscreen:exit
Dispara quando o player sai da tela cheia.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("fullscreen:exit", () => {
console.log("fullscreen:exit");
// your code here
});
pitch:time
Dispara quando a reprodução alcança o pitch time configurado para o player.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("pitch:time", () => {
console.log("pitch:time");
// your code here
});
callaction:current-active-items
Dispara quando o conjunto de itens de chamada para ação ativos muda. O event.detail.items traz os itens em exibição e o event.detail.type é "delay", "inside" ou "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
Dispara quando o SmartAutoPlay fica ativo.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:active", () => {
console.log("smartautoplay:active");
// your code here
});
smartautoplay:inactive
Dispara quando o SmartAutoPlay fica inativo, assim que o vídeo tiver tocado com áudio — seja porque o visitante tirou o mudo, seja porque ele mesmo iniciou.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:inactive", () => {
console.log("smartautoplay:inactive");
// your code here
});
smartautoplay:video-ready
Dispara quando o SmartAutoPlay está pronto para reproduzir o vídeo.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:video-ready", () => {
console.log("smartautoplay:video-ready");
// your code here
});