Player events
You can use postMessage in the IFrame SDK to subscribe to Cloud Video Player events. The iframe sends events to the parent window.
Event subscription format
The message handler is used to receive events from the player.
window.addEventListener('message', function(event) {
if (event.data && event.data.event) {
// Event handling
console.log('Player event:', event.data.event, event.data);
}
});
Initialization events
inited
The player is initialized and ready for use.
Event parameters:
vsid(string): Unique player session ID.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'inited') {
console.log('Player initialized, vsid:', event.data.vsid);
}
});
resourcesIdle
Player resources are loaded and the player is idle.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'resourcesIdle') {
console.log('Player resources loaded');
}
});
contentImpression
The content is displayed to the user (impression).
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'contentImpression') {
console.log('Content displayed');
}
});
Playback events
started
Video playback started (first play after loading content).
Event parameters:
time(number): Current playback time, in seconds.duration(number): Video duration, in seconds.title(string): Video title. This is an optional parameter.description(string): Video description. This is an optional parameter.contentId(string): Content ID. This is an optional parameter.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'started') {
console.log('Playback started');
console.log('Time:', event.data.time);
console.log('Duration:', event.data.duration);
console.log('Title:', event.data.title);
}
});
resumed
Playback resumed after pause.
Event parameters:
time(number): Current playback time, in seconds.duration(number): Video duration, in seconds.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'resumed') {
console.log('Playback resumed at', event.data.time, 'seconds');
}
});
paused
Playback paused.
Event parameters:
time(number): Current playback time, in seconds.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'paused') {
console.log('Playback paused at', event.data.time, 'seconds');
}
});
ended
Video playback ended.
Event parameters:
time(number): Playback end time, in seconds.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'ended') {
console.log('Playback ended');
}
});
Time and position events
timeupdate
Changing the current playback time. This event is generated regularly during playback.
Event parameters:
time(number): Current playback time, in seconds.duration(number): Video duration, in seconds.watchedTime(number): Total watch time, in seconds.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'timeupdate') {
console.log('Current time:', event.data.time);
console.log('Duration:', event.data.duration);
console.log('Watched:', event.data.watchedTime);
}
});
durationchange
Changing the video duration.
Event parameters:
duration(number): Updated video duration, in seconds.
This event may occur:
- When you change content.
- Periodically for live streams, as the duration keeps increasing.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'durationchange') {
console.log('Duration changed:', event.data.duration);
}
});
rewound
User changed the video playback position.
Event parameters:
time(number): Updated playback time, in seconds.previousTime(number): Previous playback time, in seconds.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'rewound') {
console.log('Playback position changed from', event.data.previousTime, 'to', event.data.time);
}
});
Audio events
volumechange
Changing the volume and muted status.
Event parameters:
volume(number): Volume level from 0 to 1.muted(boolean): Sound muted status. Iftrue, sound is off; iffalse, sound is on.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'volumechange') {
console.log('Volume:', event.data.volume);
console.log('Muted:', event.data.muted);
}
});
Error events
error
A playback error occurred.
Event parameters:
time(number): Time when the error occurred, in seconds.code(string): Error code.
Possible error codes:
'0': Unknown error.'1': Error loading video.'2': Network error.'3': Decoding error.'4': Video not supported.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'error') {
console.error('Playback error');
console.error('Error code:', event.data.code);
console.error('Time:', event.data.time);
}
});
Ad events
adShown
Ad playback started.
Event parameters:
time(number): Ad start time, in seconds.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'adShown') {
console.log('Ad playback started');
}
});
adEnd
Ad playback ended.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'adEnd') {
console.log('Ad playback ended');
}
});
adPodStart
Ad pod playback started.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'adPodStart') {
console.log('Ad pod playback started');
}
});
Display events
sizeChange
The video was resized.
Event parameters:
videoWidth(number): Video width, in pixels.videoHeight(number): Video height, in pixels.isAd(boolean): Indicates whether the current video is an ad.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'sizeChange') {
console.log('Video size:', event.data.videoWidth, 'x', event.data.videoHeight);
console.log('This video is an ad:', event.data.isAd);
}
});
fullscreenchange
Changing the fullscreen mode state.
Event parameters:
isFullscreen(boolean): Fullscreen mode status,truefor enabled andfalsefor disabled.
Handling example:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'fullscreenchange') {
console.log('Fullscreen mode:', event.data.isFullscreen ? 'enabled' : 'disabled');
}
});