Player methods

You can manage Cloud Video Player using the following IFrame SDK methods: Methods are called via postMessage to communicate with the iframe.

Method call formatMethod call format

To call player methods, use the following format:

var iframe = document.getElementById('video-player');
var player = iframe.contentWindow;

player.postMessage({
    method: 'methodName',
    // method parameters
}, '*');

Methods to manage playbackMethods to manage playback

playplay

Starts video playback.

Here is a possible use case:

player.postMessage({
    method: 'play'
}, '*');

pausepause

Pauses playback.

Here is a possible use case:

player.postMessage({
    method: 'pause'
}, '*');

seekseek

Rewinds or fast forward a video to a specific position.

Parameters:

• time (number): Playback position to seek to, in seconds.

Example of seeking to 30 seconds:

player.postMessage({
    method: 'seek',
    time: 30
}, '*');

updateSourceupdateSource

Switches the content to another video.

Parameters:

• contentId (string): New content ID.
• params (object): Optional parameters for loading content.

Where:

• https://runtime.video.cloud.yandex.net/player/...: Link to playable content, e.g., https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y. For more information, see these sections:
  • Getting an embed code or link to a video
  • Getting an embed code or link to a broadcast
  • Getting an embed code or link to a playlist

Example of switching to another video:

player.postMessage({
    method: 'updateSource',
    id: 'vplayer/new-video-id',
    params: {
        autoplay: true
    }
}, '*');

After successfully switching content, the player will send the inited event with the new vsid.

Methods to manage audioMethods to manage audio

setVolumesetVolume

Sets the audio volume level of a video.

Parameters:

• volume (number): Volume level of a video from 0 (muted) to 1 (maximum volume).

Example of setting the volume to 70%:

player.postMessage({
    method: 'setVolume',
    volume: 0.7
}, '*');

mutemute

Mutes a video.

Here is a possible use case:

player.postMessage({
    method: 'mute'
}, '*');

unmuteunmute

Unmutes a video.

Here is a possible use case:

player.postMessage({
    method: 'unmute'
}, '*');

Methods to manage quality and tracksMethods to manage quality and tracks

setQualitysetQuality

Sets the video quality.

Parameters:

• quality (string): Video quality. The possible values are:
  • small: 240p
  • medium: 360p
  • large: 480p
  • hd720: 720p
  • hd1080: 1080p
  • Manual quality setting, e.g., '720p' or '1080p'

Example of setting video quality to HD 720p:

player.postMessage({
    method: 'setQuality',
    quality: 'hd720'
}, '*');

Or:

player.postMessage({
    method: 'setQuality',
    quality: '720p'
}, '*');

setAudioTracksetAudioTrack

Switches the audio track.

Parameters:

• value (string): Audio track ID.

Here is a possible use case:

player.postMessage({
    method: 'setAudioTrack',
    value: 'audio-track-id'
}, '*');

Methods to manage displayMethods to manage display

setFullscreensetFullscreen

Switches fullscreen mode.

Parameters:

• fullscreen (boolean): true to enter fullscreen, false to exit fullscreen.

Example of entering the fullscreen mode:

player.postMessage({
    method: 'setFullscreen',
    fullscreen: true
}, '*');

Example of exiting the fullscreen mode:

player.postMessage({
    method: 'setFullscreen',
    fullscreen: false
}, '*');

configureSkinconfigureSkin

Configures the display of player UI elements.

Parameters:

• skinConfig (object): Object with UI settings:
  • hiddenControls (array | string): Array of strings or comma-separated string with the names of UI elements to hide.

Available UI elements for hiddenControls:

• *: All interface elements.
• play: Play, pause, and replay buttons.
• startScreenPlay: Play button on the start screen.
• sound: Mute button.
• volumeSlider: Volume slider.
• settings: Settings button.
• fullscreen: Fullscreen button.
• timeline: Playback timeline (also disables seeking from the keyboard).
• timelinePreview: Preview on the timeline.
• live: Go back to live button.
• poster: Poster.
• time: Current playback time.
• forward: Fast forward button (mobile interface).
• backward: Rewind button (mobile interface).
• preloader: Loading spinner.
• contextMenu: Context menu.
• startScreen: Start screen.
• playbackRate: Playback rate.
• nextAdInfo: Time until the next ad.
• subtitlesToggle: Subtitle toggle button.
• mobileSeekButtons: Rewind and fast forward buttons in the mobile interface.
• title: Video title.

Example of hiding multiple elements using an array:

player.postMessage({
    method: 'configureSkin',
    skinConfig: {
        hiddenControls: ['play', 'timeline', 'sound']
    }
}, '*');

Example of hiding elements using a string:

player.postMessage({
    method: 'configureSkin',
    skinConfig: {
        hiddenControls: 'play,timeline,sound'
    }
}, '*');

Example of showing a previously hidden element (using ! before the element name):

player.postMessage({
    method: 'configureSkin',
    skinConfig: {
        hiddenControls: ['*', '!play'] // play will be shown, all other elements will be hidden
    }
}, '*');

Handling method resultsHandling method results

Some methods can return results through events. You can use the unique request ID to monitor method results:

var requestId = 'unique-request-id-' + Date.now();

// Sending a command with the ID
player.postMessage({
    method: 'play',
    id: requestId
}, '*');

// Listening for a response
window.addEventListener('message', function(event) {
    if (event.data && event.data.event === 'play:return' && event.data.id === requestId) {
        if (event.data.error) {
            console.error('Method execution error:', event.data.error);
        } else {
            console.log('Method executed successfully:', event.data.result);
        }
    }
});

Each method has a matching return event in <methodName>:return format.

See alsoSee also

• Getting started with the video player SDK for IFrame
• Player initialization parameters
• Player events