Examples
Sync video time and build a responsive container
Both examples below drive the player through its ID. If the page has a single embed you can reach it with document.querySelector("vturb-smartplayer") instead, but the examples keep the ID so they still work on pages with several players.
Show the current playback time
Put a span next to the player to hold the time:
<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>
Then keep it in sync with the video:timeupdate event:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:timeupdate", (event) => {
document.getElementById("time-PLAYER_ID").textContent = event.detail.time;
});
video:timeupdate fires roughly once per second, not once per frame. Don't build animations on
it.
Expand the player while it plays
This one starts the player in a fixed-size container and takes it fullscreen on play, then restores it on pause.
<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>
Expand when playback starts:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:play", (event) => {
event.target.fullscreen("on");
});
And restore when it pauses:
const player = document.getElementById("vid-PLAYER_ID");
player.addEventListener("video:pause", (event) => {
event.target.fullscreen("off");
});
fullscreen() is one of the methods that needs the player to be ready. On the custom element,
wait for player:ready; on the iframe, wait for iframe:connected. See Element vs
iframe.
The events reference lists everything else the player emits.