Events
Every event the player emits, with its payload
The player emits its events through the browser's native event system, so you listen to them with addEventListener like any other DOM event.
The type of each event below is what arrives in event.detail on the custom element. On the iframe the detail never includes the player, so keep the one from iframe:connected: video:timeupdate and video:pause carry { time }, fullscreen:enter and fullscreen:exit carry { type }, and video:play, video:ended, pitch:time and the smartautoplay:* events carry no player.
Prop
Type
Attaching a listener
On the custom element, the player is the event target, so you can call a method straight from the listener. On the iframe, keep the reference you got when it connected:
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();
});
On the custom element the reference is event.target. On the iframe, event.target is the
<iframe> element and the event does not carry the player: use the event.detail.player from
iframe:connected, or window.vturbSdk.get(id) once it has connected.
player:ready
Fired once the player is initialized. Call methods only after it: before that, they do nothing, or throw if the player script has not loaded yet.
This event does not exist on the iframe embed — use iframe:connected there.
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
Fired when the iframe SDK connects to the player. The iframe player has no methods before it.
It is dispatched on the <iframe> element and bubbles up to document, once for every player on the page, so use event.detail.id to tell them apart.
// 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
Fired when playback starts or resumes.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:play", () => {
console.log("video:play");
// your code here
});
video:pause
Fired when playback is paused.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:pause", () => {
console.log("video:pause");
// your code here
});
video:ended
Fired when playback reaches the end of the video.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("video:ended", () => {
console.log("video:ended");
// your code here
});
video:timeupdate
Fired as playback progresses, roughly once per second. The current time arrives in 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
Fired when the player enters fullscreen.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("fullscreen:enter", () => {
console.log("fullscreen:enter");
// your code here
});
fullscreen:exit
Fired when the player leaves fullscreen.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("fullscreen:exit", () => {
console.log("fullscreen:exit");
// your code here
});
pitch:time
Fired when playback reaches the pitch time configured for the player.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("pitch:time", () => {
console.log("pitch:time");
// your code here
});
callaction:current-active-items
Fired when the set of active call-to-action items changes. event.detail.items holds the items now showing and event.detail.type is "delay", "inside" or "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
Fired when SmartAutoPlay becomes active.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:active", () => {
console.log("smartautoplay:active");
// your code here
});
smartautoplay:inactive
Fired when SmartAutoPlay becomes inactive, once the video has played with audio — whether the viewer unmuted it or it started that way.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:inactive", () => {
console.log("smartautoplay:inactive");
// your code here
});
smartautoplay:video-ready
Fired when SmartAutoPlay is ready to play the video.
const player = document.querySelector("vturb-smartplayer");
player.addEventListener("smartautoplay:video-ready", () => {
console.log("smartautoplay:video-ready");
// your code here
});