Player events

Using the on and once methods of JavaScript SDK, you can subscribe to Cloud Video Player events:

SourceChangeSourceChange

Switching content.

The handler in the { source } object receives a new content link.

Here is an example:

player.on('SourceChange', ({ source }) => {
    console.log(source);
});

StatusChangeStatusChange

Changing the playback status.

The handler in the { status } object receives a new playback status value.

Here is an example:

player.on('StatusChange', ({ status }) => {
    console.log(status);
});

ErrorChangeErrorChange

Getting or resetting an error.

The handler in the { error } object receives an error.

An error is reset when switching content (if switching content is possible). In this case, the handler receives the error object with the undefined value.

Here is an example:

player.on('ErrorChange', ({ error }) => {
    console.log(error);
});

CurrentTimeChangeCurrentTimeChange

Changing the position on the timeline.

The handler in the { currentTime } object receives a new current time value.

Here is an example:

player.on('CurrentTimeChange', ({ currentTime }) => {
    console.log(currentTime);
});

DurationChangeDurationChange

Changing the video duration.

The handler in the { duration } object receives a new duration value.

This event may occur:

• When you change content.
• Periodically for the EVENT type videos as their duration continuously increases.
• When the LIVE video type changes to VOD.

Here is an example:

player.on('DurationChange', ({ duration }) => {
    console.log(duration);
});

VideoTypeChangeVideoTypeChange

Changing the video type.

The handler in the { videoType } object receives a new video type value.

This event may occur:

• When you change content.
• When the LIVE or EVENT video type changes to VOD.

Here is an example:

player.on('VideoTypeChange', ({ videoType }) => {
    console.log(videoType);
});

MutedChangeMutedChange

Changing the video muted status.

The handler in the { muted } object receives a new muted status value.

Here is an example:

player.on('MutedChange', ({ muted }) => {
    console.log(muted);
});

VolumeChangeVolumeChange

Changing the video sound volume.

The handler in the { volume } object receives a new volume level value.

Here is an example:

player.on('VolumeChange', ({ volume }) => {
    console.log(volume);
});

UtcStartTimeChangeUtcStartTimeChange

Changing the UTC video start time.

The handler in the { utcStartTime } object receives a new UTC time value.

This event may occur:

• When you change content.
• When the LIVE video type changes to VOD.

Here is an example:

player.on('UtcStartTimeChange', ({ utcStartTime }) => {
    console.log(utcStartTime);
});

SeekableRangeChangeSeekableRangeChange

Changing the seekable range.

The handler in the { seekableRange } object receives a new seekable range value.

This event may occur:

• When you change content.
• Periodically for the LIVE and EVENT type videos as their seekable range continuously increases.

Here is an example:

player.on('SeekableRangeChange', ({ seekableRange }) => {
    console.log(seekableRange.start, seekableRange.end);
});

BufferedRangesChangeBufferedRangesChange

Changing the buffered ranges.

The handler in the { bufferedRanges } object receives an array with a new description of buffered ranges.

Here is an example:

player.on('BufferedRangesChange', ({ bufferedRanges }) => {
    console.log(bufferedRanges);
});

FullscreenStateChangeFullscreenStateChange

Changing the fullscreen mode state.

The handler in the { isFullscreen } object receives a new fullscreen mode state value.

Here is an example:

player.on('FullscreenStateChange', ({ isFullscreen }) => {
    console.log(isFullscreen);
});

See alsoSee also

• Interface: PlayerSdkEventHandlers in the API reference.