Player events

Using the on and once methods of the 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);
});

PlaybackSpeedChangePlaybackSpeedChange

Changing playback speed.

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

Here is an example:

player.on('PlaybackSpeedChange', ({ playbackSpeed }) => {
    console.log(playbackSpeed);
});

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 receives the { isFullscreen } object containing the updated fullscreen state value.

Here is an example:

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

TextTracksChangeTextTracksChange

Updating the list of available text tracks (captions).

The handler receives the { textTracks } object containing the new array of available tracks.

Here is an example:

player.on('TextTracksChange', ({ textTracks }) => {
    console.log(textTracks);
});

VideoTracksChangeVideoTracksChange

Updating the list of available video tracks.

The handler receives the { videoTracks } object containing the new array of available tracks.

Here is an example:

player.on('VideoTracksChange', ({ videoTracks }) => {
    console.log(videoTracks);
});

VideoTrackChangeVideoTrackChange

Updating the current video track.

The handler receives a new current track value in the { videoTrack } object.

Here is an example:

player.on('VideoTrackChange', ({ videoTrack }) => {
    console.log(videoTrack);
});

Useful linksUseful links

Interface: PlayerSdkEventHandlers, description of player event handlers in the API reference