Начало работы с SDK видеоплеера для IFrame
Вы можете интегрировать видеоплеер с контентом из Cloud Video в ваш проект с помощью Cloud Video Player SDK для IFrame. SDK позволяет управлять плеером через JavaScript API, используя механизм postMessage для взаимодействия с iframe.
Подключение плеера на странице
Чтобы подключить плеер на страницу, добавьте на нее код вставки iframe:
<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>
Где:
https://runtime.video.cloud.yandex.net/player/...— ссылка на воспроизводимый контент, напримерhttps://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y. Подробнее см. в разделах:
Инициализация SDK
Для управления плеером через JavaScript необходимо получить ссылку на iframe и использовать метод postMessage для отправки команд:
// Получаем ссылку на iframe
var iframe = document.getElementById('video-player');
var player = iframe.contentWindow;
// Функция для отправки команд плееру
function sendCommand(method, params) {
player.postMessage({
method: method,
...params
}, '*');
}
// Функция для подписки на события плеера
window.addEventListener('message', function(event) {
if (event.data && event.data.event) {
console.log('Событие плеера:', event.data.event, event.data);
}
});
Настройка параметров плеера
Вы можете настроить параметры плеера при создании iframe, добавив их в URL в виде query-параметров:
<iframe
id="video-player"
src="https://runtime.video.cloud.yandex.net/player/...?autoplay=1&mute=1"
></iframe>
Подробнее о параметрах инициализации плеера см. в разделах:
Управление плеером
Информацию о методах управления плеером см. в разделе Методы плеера.
Пример использования методов:
// Запустить воспроизведение
sendCommand('play', {});
// Поставить на паузу
sendCommand('pause', {});
// Перемотать на 30-ю секунду
sendCommand('seek', { time: 30 });
// Установить громкость на 50%
sendCommand('setVolume', { volume: 0.5 });
События плеера
Информацию о событиях плеера см. в разделе События плеера.
Пример подписки на события:
window.addEventListener('message', function(event) {
if (!event.data || !event.data.event) return;
switch(event.data.event) {
case 'inited':
console.log('Плеер инициализирован, vsid:', event.data.vsid);
break;
case 'started':
console.log('Воспроизведение началось');
break;
case 'paused':
console.log('Воспроизведение приостановлено');
break;
case 'timeupdate':
console.log('Текущее время:', event.data.time);
break;
}
});