Exemplos
Sincronize o tempo do vídeo e monte um container responsivo
Os dois exemplos abaixo controlam o player pelo ID. Se a página tiver um único embed, dá para alcançá-lo com document.querySelector("vturb-smartplayer"), mas os exemplos mantêm o ID para continuarem funcionando em páginas com vários players.
Mostrar o tempo de reprodução
Você pode colocar um span ao lado do player para receber o tempo:
<vturb-smartplayer id="vid-PLAYER_ID"></vturb-smartplayer>
<script src="https://scripts.converteai.net/ACCOUNT_ID/players/PLAYER_ID/v4/player.js" async></script>
<span id="time-PLAYER_ID"></span>
Depois mantenha-o em sincronia com o evento video:timeupdate:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:timeupdate", (event) => {
document.getElementById("time-PLAYER_ID").textContent = event.detail.time;
});
O video:timeupdate dispara cerca de uma vez por segundo, não a cada quadro. Não construa
animações em cima dele.
Expandir o player durante a reprodução
Este começa com o player num container de tamanho fixo, leva para tela cheia ao dar play e restaura ao pausar.
<div id="player-container" style="width: 640px; height: 360px;">
<vturb-smartplayer id="vid-PLAYER_ID"></vturb-smartplayer>
<script src="https://scripts.converteai.net/ACCOUNT_ID/players/PLAYER_ID/v4/player.js" async></script>
</div>
Expanda quando a reprodução começar:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:play", (event) => {
event.target.fullscreen("on");
});
E restaure quando pausar:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:pause", (event) => {
event.target.fullscreen("off");
});
fullscreen() é um dos métodos que exige o player pronto. No elemento customizado, espere o
player:ready; no iframe, espere o iframe:connected. Veja Elemento vs
iframe.
A referência de eventos lista tudo o mais que o player emite.