Ejemplos
Sincroniza el tiempo del vídeo y arma un contenedor responsivo
Los dos ejemplos de abajo controlan el reproductor por su ID. Si la página tiene una sola incrustación, puedes alcanzarlo con document.querySelector("vturb-smartplayer"), pero los ejemplos mantienen el ID para seguir funcionando en páginas con varios reproductores.
Mostrar el tiempo de reproducción
Coloca un span junto al reproductor para recibir el tiempo:
<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>
Después mantenlo sincronizado con el evento video:timeupdate:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:timeupdate", (event) => {
document.getElementById("time-PLAYER_ID").textContent = event.detail.time;
});
video:timeupdate se dispara aproximadamente una vez por segundo, no en cada fotograma. No montes
animaciones sobre él.
Expandir el reproductor durante la reproducción
Este empieza con el reproductor en un contenedor de tamaño fijo, lo lleva a pantalla completa al reproducir y lo restaura al 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>
Expande cuando empiece la reproducción:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:play", (event) => {
event.target.fullscreen("on");
});
Y restaura al pausar:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:pause", (event) => {
event.target.fullscreen("off");
});
fullscreen() es uno de los métodos que exige el reproductor listo. En el elemento personalizado,
espera player:ready; en el iframe, iframe:connected. Mira Elemento vs
iframe.
La referencia de eventos lista todo lo demás que emite el reproductor.