События плеера
С помощью механизма postMessage SDK для IFrame вы можете подписаться на события видеоплеера Cloud Video Player. События отправляются из iframe в родительское окно.
Формат подписки на события
Для получения событий от плеера используется обработчик message:
window.addEventListener('message', function(event) {
if (event.data && event.data.event) {
// Обработка события
console.log('Событие плеера:', event.data.event, event.data);
}
});
События инициализации
inited
Плеер инициализирован и готов к работе.
Параметры события:
vsid(string) — уникальный идентификатор сессии плеера.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'inited') {
console.log('Плеер инициализирован, vsid:', event.data.vsid);
}
});
resourcesIdle
Все ресурсы плеера загружены, плеер находится в состоянии ожидания.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'resourcesIdle') {
console.log('Ресурсы плеера загружены');
}
});
contentImpression
Контент отображен пользователю (impression).
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'contentImpression') {
console.log('Контент отображен');
}
});
События воспроизведения
started
Воспроизведение видео началось (первый запуск после загрузки контента).
Параметры события:
time(number) — текущее время воспроизведения в секундах.duration(number) — длительность видео в секундах.title(string, необязательный) — название видео.description(string, необязательный) — описание видео.contentId(string, необязательный) — идентификатор контента.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'started') {
console.log('Воспроизведение началось');
console.log('Время:', event.data.time);
console.log('Длительность:', event.data.duration);
console.log('Название:', event.data.title);
}
});
resumed
Воспроизведение возобновлено после паузы.
Параметры события:
time(number) — текущее время воспроизведения в секундах.duration(number) — длительность видео в секундах.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'resumed') {
console.log('Воспроизведение возобновлено на', event.data.time, 'секунде');
}
});
paused
Воспроизведение приостановлено.
Параметры события:
time(number) — текущее время воспроизведения в секундах.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'paused') {
console.log('Воспроизведение приостановлено на', event.data.time, 'секунде');
}
});
ended
Воспроизведение видео завершено.
Параметры события:
time(number) — время окончания воспроизведения в секундах.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'ended') {
console.log('Воспроизведение завершено');
}
});
События времени и позиции
timeupdate
Изменение текущего времени воспроизведения. Событие генерируется периодически во время воспроизведения.
Параметры события:
time(number) — текущее время воспроизведения в секундах.duration(number) — длительность видео в секундах.watchedTime(number) — общее время просмотра в секундах.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'timeupdate') {
console.log('Текущее время:', event.data.time);
console.log('Длительность:', event.data.duration);
console.log('Просмотрено:', event.data.watchedTime);
}
});
durationchange
Изменение длительности видео.
Параметры события:
duration(number) — новая длительность видео в секундах.
Событие может возникать:
- при смене контента;
- периодически для прямых трансляций, так как длительность непрерывно растет.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'durationchange') {
console.log('Длительность изменилась:', event.data.duration);
}
});
rewound
Пользователь перемотал видео.
Параметры события:
time(number) — новое время воспроизведения в секундах.previousTime(number) — предыдущее время воспроизведения в секундах.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'rewound') {
console.log('Перемотка с', event.data.previousTime, 'на', event.data.time);
}
});
События звука
volumechange
Изменение громкости или статуса muted (выключенного звука).
Параметры события:
volume(number) — уровень громкости от 0 до 1.muted(boolean) — статус выключенного звука (true— звук выключен,false— включен).
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'volumechange') {
console.log('Громкость:', event.data.volume);
console.log('Звук выключен:', event.data.muted);
}
});
События ошибок
error
Произошла ошибка воспроизведения.
Параметры события:
time(number) — время, когда произошла ошибка, в секундах.code(string) — код ошибки.
Возможные коды ошибок:
'0'— неизвестная ошибка.'1'— ошибка загрузки видео.'2'— ошибка сети.'3'— ошибка декодирования.'4'— видео не поддерживается.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'error') {
console.error('Ошибка воспроизведения');
console.error('Код ошибки:', event.data.code);
console.error('Время:', event.data.time);
}
});
События рекламы
adShown
Начался показ рекламного ролика.
Параметры события:
time(number) — время начала показа рекламы в секундах.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'adShown') {
console.log('Начался показ рекламы');
}
});
adEnd
Показ рекламного ролика завершен.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'adEnd') {
console.log('Показ рекламы завершен');
}
});
adPodStart
Начался показ рекламного блока (pod).
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'adPodStart') {
console.log('Начался показ рекламного блока');
}
});
События отображения
sizeChange
Изменение размера видео.
Параметры события:
videoWidth(number) — ширина видео в пикселях.videoHeight(number) — высота видео в пикселях.isAd(boolean) — является ли текущее видео рекламой.
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'sizeChange') {
console.log('Размер видео:', event.data.videoWidth, 'x', event.data.videoHeight);
console.log('Это реклама:', event.data.isAd);
}
});
fullscreenchange
Изменение состояния полноэкранного режима.
Параметры события:
isFullscreen(boolean) — статус полноэкранного режима (true— включен,false— выключен).
Пример обработки:
window.addEventListener('message', function(event) {
if (event.data && event.data.event === 'fullscreenchange') {
console.log('Полноэкранный режим:', event.data.isFullscreen ? 'включен' : 'выключен');
}
});