Getting started with the video player SDK for IFrame
You can embed a video player with content from Cloud Video into your project using the Cloud Video Player SDK for IFrame. The SDK enables you to manage the player via the JavaScript API, using postMessage to communicate with the iframe.
Adding a player to your page
To add a player to a page, add the iframe embed code:
<iframe
id="video-player"
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/..."
></iframe>
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:
Initializing the SDK
To manage a player via JavaScript, get a reference to the iframe and use the postMessage method to send commands:
// Getting a reference to the iframe
var iframe = document.getElementById('video-player');
var player = iframe.contentWindow;
// Function for sending commands to the player
function sendCommand(method, params) {
player.postMessage({
method: method,
...params
}, '*');
}
// Function for subscribing to player events
window.addEventListener('message', function(event) {
if (event.data && event.data.event) {
console.log('Player event:', event.data.event, event.data);
}
});
Configuring player options
You can configure the player options when creating the iframe by adding them to the URL as query parameters:
<iframe
id="video-player"
src="https://runtime.video.cloud.yandex.net/player/...?autoplay=1&mute=1"
></iframe>
For more information about player initialization parameters, see the following sections:
Player controls
For more info on how to manage the player, see Player methods.
Example of using methods:
// Start playback
sendCommand('play', {});
// Pause playback
sendCommand('pause', {});
// Seek to 30 seconds
sendCommand('seek', { time: 30 });
// Set the volume to 50%
sendCommand('setVolume', { volume: 0.5 });
Player events
For details, see Player events.
Example of a subscription to events:
window.addEventListener('message', function(event) {
if (!event.data || !event.data.event) return;
switch(event.data.event) {
case 'inited':
console.log('Player initialized, vsid:', event.data.vsid);
break;
case 'started':
console.log('Playback started');
break;
case 'paused':
console.log('Playback paused');
break;
case 'timeupdate':
console.log('Current time:', event.data.time);
break;
}
});