Player methods

You can manage Cloud Video Player using the following JavaScript SDK methods:

setSourcesetSource

Switches content.

Example of simple content switching:

player.setSource('https://runtime.video.cloud.yandex.net/player/...');

Where https://runtime.video.cloud.yandex.net/player/... is a link to a video, broadcast, or playlist.

Example of content switching with a specified starting position and disabled autoplay:

player.setSource({
    source: 'https://runtime.video.cloud.yandex.net/player/...',
    startPosition: 10,
    autoplay: false
});

This example uses an object of the following format as the parameter:

{
    /** @type {string} link to playable content */
    source,
    /**
     * @type {boolean} (optional) autoplay when switching to content.
     * By default, preserves the playback state used at time the method is called.
     * Autoplay may fail. Read more: https://developer.chrome.com/blog/autoplay/
     * autoplay
     */
    autoplay,
    /** @type {number} (optional, the default value is 0) starting position in seconds */
    startPosition,
}

The method returns a promise which:

• Turns to fulfilled if switching was successful.
• Turns to rejected if switching ended with an error. For example, if the content with a specified id was not found.

preloadSourcepreloadSource

Preloads content for playback.

Example of basic content preloading:

player.preloadSource('https://runtime.video.cloud.yandex.net/player/...');

Example of preloading with optional parameters:

const controller = new AbortController();

player.preloadSource(
    {
        source: 'https://runtime.video.cloud.yandex.net/player/...',
        startPosition: 0,
    },
    {
        signal: controller.signal,
        bufferGoal: 30
    }
);

// To cancel preloading:
// controller.abort();

This example uses an object of the following format as the first parameter:

{
    /** @type {string} link to playable content */
    source,
    /** @type {number} (optional, the default value is 0) starting position in seconds */
    startPosition,
}

You can provide an object with preloading settings as the second optional parameter:

{
    /** @type {AbortSignal} (optional) signal to cancel preloading */
    signal,
    /** @type {number} (optional) target buffer size in seconds */
    bufferGoal,
}

The method returns a promise which:

• Turns to fulfilled if preloading was successful.
• Turns to rejected if preloading ended with an error or was canceled.

getStategetState

Returns the player state as an object in the format described in Player state.

Here is a possible use case:

var state = player.getState();

playplay

Starts playback.

The method returns a promise which:

• Turns to fulfilled if playback starts.
• Turns to rejected if playback fails.

pausepause

Pauses playback.

seekseek

Rewinds or fast forwards a video to a specific position, which is provided as the parameter.

Example of jumping to the 10th second:

player.seek(10);

setMutedsetMuted

Turns sound on/off.

The boolean type value is provided as the parameter.

Example of turning sound on:

player.setMuted(false);

setVolumesetVolume

Sets video volume level in the range from 0 (muted) to 1 (maximum volume).

Example:

player.setVolume(0.7);

setTextTracksetTextTrack

Switches the text track (subtitles).

The value value from the track object obtained from textTracks is provided as the parameter.

To disable subtitle protection, provide null.

Example of enabling subtitles:

var tracks = player.getState().textTracks;
if (tracks.length > 0) {
    player.setTextTrack(tracks[0].value);
}

Example of enabling subtitles from the start of playback:

player.once('TextTracksChange', ({ textTracks }) => {
    if (textTracks.length > 0) {
        player.setTextTrack(textTracks[0].value);
    }
});

Example of disabling subtitles:

player.setTextTrack(null);

setVideoTracksetVideoTrack

Switches the video track.

The value value from the track object obtained from videoTracks is provided as the parameter.

Example of switching tracks:

var tracks = player.getState().videoTracks;
if (tracks.length > 0) {
    player.setVideoTrack(tracks[0].value);
}

Example of track switching at playback start:

player.once('VideoTracksChange', ({ videoTracks }) => {
    if (videoTracks.length > 0) {
        player.setVideoTrack(videoTracks[0].value);
    }
});

setPlaybackSpeedsetPlaybackSpeed

Sets video playback speed.

The parameter is a number for playback speed, for example:

• 1: Normal speed (default).
• 0.5: Half speed.
• 2: Double speed.

Example for double playback speed:

player.setPlaybackSpeed(2);

Example for half speed:

player.setPlaybackSpeed(0.5);

on/onceon/once

Allows you to subscribe to player events.

If once is called, the subscription works only the first time the event is triggered; if on is called, each time the event is triggered.

These methods have the on(eventName, handler) and once(eventName, handler) signatures, respectively. The first parameter communicates the event name, the second communicates the handler.

The handler receives an object with the appropriate field from the player state.

Example of subscribing to all triggered playback StatusChange events:

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

offoff

Allows you to unsubscribe from the player events you subscribed to using the on or once methods.

The method has the off(eventName, handler) signature. The first parameter communicates the event name, the second communicates the handler you had used for subscription.

Example of unsubscribing from a handler function named handler for the playback StatusChange event:

player.off('StatusChange', handler);

destroydestroy

Destroys the player and frees up the resources.

Returns a promise, which enters the fulfilled state as soon as the operation is completed.

Here is a possible use case:

player.destroy();

Useful linksUseful links

Interface: PlayerSdkApi: Description of player management methods in the API reference