Для управления плеером используется объект со следующими свойствами и методами:
Events: IframePlayerApi.Events
on(type: IframePlayerApi.Events, listener: Function): this
Подписаться на событие плеера. См. события плеера.
once(type: IframePlayerApi.Events, listener: Function): this
Подписаться на событие плеера. Обработчик события будет вызван только один раз.
off(type: IframePlayerApi.Events, listener: Function): this
Отписаться от события плеера.
Проигрывание приостановлено?
Проигрывание дошло до конца?
Начать проигрывание.
Приостановить проигрывание.
Остановить проигрывание и установить текущее время на начало.
getCurrentTime(): Promise<number>
Текущее время воспроизведения (в секундах).
getDuration(): Promise<number>
Продолжительность ролика (в секундах).
seekTo(time: number): Promise<void>
Поиск и перемотка на указанное время (в секундах).
Выключен ли звук?
Выключить звук.
Включить звук.
Уровень громкости (0..1, где 0 это 0%, а 1 это 100%).
setVolume(value: number): Promise<void>
Установить уровень громкости (0..1, где 0 это 0%, а 1 это 100%).
getPlaybackRate(): Promise<number>
Скорость воспроизведения (1 - нормальная скорость воспроизведения).
setPlaybackRate(value: number): Promise<void>
Установить скорость воспроизведения (1 - нормальная скорость воспроизведения).
getVideoQualityList(): Promise<VideoQuality[]>
Список доступных качеств.
getVideoQuality(): Promise<VideoQuality>
Текущее качество видео.
setVideoQuality(quality: VideoQuality): Promise<void>
Установить качество видео.
enableTextTrack(lang: string): Promise<void>
Включить субтитры на указанном языке.
disableTextTrack(): Promise<void>
Выключить субтитры.
setPlaylistItemOptions(options: PlaylistItemOptions): Promise<void>
Установить параметры для текущего ролика.
interface PlaylistItemOptions {
/** Заголовок видео-ролика. Отображается в верхней части плеера. */
title?: string;
/** Подзаголовок видео-ролика. Отображается под основным заголовком. */
subtitle?: string;
/** Картинка с постером для видео-ролика. */
poster?: string;
/** Субтитры (Video text tracks). */
vtt?: {
/** Заголовок */
label: string;
/** Url файла субтитров */
src: string;
/** Язык субтитров */
srcLang: string;
}[];
/** Главы - разделение отрезков времени. */
chapters?: {
/** Точка времени (в секундах) */
position: number;
/** Заголовок */
title: string;
}[];
/** Дополнительные материалы для скачивания. */
files?: {
list: {
name: string;
url: string;
mime: string;
size?: number;
}[];
archiveUrl?: string;
};
/** @experimental Закладки, привязанные ко времени. */
bookmarks?: {
id: string;
/** Время в секундах. */
time: number;
}[];
/** @experimental Призывы к действию (CTA). */
cta?: {
id: string;
title: string;
description?: string;
/** Возможность закрыть/пропустить. */
skipable?: boolean;
buttonStyle?: CSSProperties;
/** Срабатывание CTA */
trigger: {
/** Процент текущего времени, например: `[0, 100]`. */
percentages: number[];
/** Точки времени (сек.), например: `[60, 600]`. */
timePoints: number[];
/** На паузе */
pause: boolean;
};
}[];
/** @experimental DRM. */
drm?: {
auth?: {
/** Пользовательский токен для авторизации. */
token?: string;
};
};
/** @experimental Реклама. */
ad?: {
adTagUrl: string;
};
}
Close a CTA. @experimental
isFullscreen(): Promise<boolean>
Whether is active fullscreen mode.
setFullscreen(fullscreen: boolean): Promise<void>
Set fullscreen mode value.
Whether is active PiP mode.
setPip(pip: boolean): Promise<void>
Set PiP mode value.
getPlaylistItem(): Promise<{ id: string | undefined } | undefined>
Текущий ролик в плейлисте. @experimental
switchTo(id: string): Promise<void>
Переключить на указанный ролик в плейлисте. @experimental
Переключить на следующий ролик в плейлисте.@experimental
Переключить на предудыщий ролик в плейлисте. @experimental
setOptions(options: UpdatablePlayerOptions): Promise<void>
Установить параметры для плеера. @experimental
interface UpdatablePlayerOptions {
/** Настройки UI */
ui?: {
/** @experimental Водяной знак. */
watermark?: {
/** Текст */
text: string;
/**
* - `stripes` - линиями;
* - `random` - в случайных местах;
* По умолчанию `random`.
*/
mode?: 'stripes' | 'random';
/** @experimental Коэффициент масштабирования размера текста в зависимости от размера плеера. По умолчанию `0.25`. */
scale?: number;
/** @experimental Длительность показа/скрытия (мс). Если не указано, текст показывается постоянно. */
displayTimeout?: number | { visible: number; hidden: number };
};
};
}
Например:
player.setOptions({ ui: { watermark: { text: 'watermark' } } });
Удалить плеер (<iframe>
) из DOM.
В каждый обработчик события передается объект события с данными о нем.
{
/** Тип события */
type: IframePlayerApi.Events;
/** Данные события, зависят от типа события, могут отсутствовать */
data: Data;
/** Объект управления плеером, соответствующий событию */
target: IframePlayerApi;
}
IframePlayerApi.Events.Ready
- Плеер загрузил все необходимые данные и готов к воспроизведению.
При выключенной предзагрузке (preload='none') это событие сработает при начале воспроизведения.
{
quality: VideoQuality;
qualityLevels: VideoQualityLevels;
currentTime: number;
duration: number;
}
IframePlayerApi.Events.QualityChanged
- Изменилось качество видео.
{
quality: VideoQuality;
}
IframePlayerApi.Events.CurrentTrackChanged
- Смена текущего трека. @experimental
{
item: { id?: string }
}
IframePlayerApi.Events.SeekChapter
- Поиск главы, текущее время установлено на позицию главы. @experimental
{
position: number;
}
IframePlayerApi.Events.SizeChanged
- Размер плеера изменился. @experimental
{
width: number;
height: number;
}
IframePlayerApi.Events.Play
- Запуск воспроизведения.
У события нет данных.
IframePlayerApi.Events.Playing
- Воспроизведение началось.
У события нет данных.
IframePlayerApi.Events.Waiting
- Буферизация.
У события нет данных.
IframePlayerApi.Events.Pause
- Пауза.
У события нет данных.
IframePlayerApi.Events.Ended
- Окончание воспроизведения.
У события нет данных.
IframePlayerApi.Events.TimeUpdate
- Изменение текущего времени воспроизведения.
{
currentTime: number;
}
IframePlayerApi.Events.Progress
- Загружается медия ресурс.
{
bufferedTime: number;
}
IframePlayerApi.Events.Seeked
- Поиск завершен.
У события нет данных.
IframePlayerApi.Events.DurationChange
- Изменение длительности ролика.
{
duration: number;
}
IframePlayerApi.Events.VolumeChange
- Изменен уровень звука.
{
volume: number;
muted: boolean;
}
IframePlayerApi.Events.PlaybackRateChange
- Изменение скорости воспроизведения.
{
playbackRate: number;
}
IframePlayerApi.Events.FullscreenChange
- Изменение полноэкранного режима.
{
isFullscreen: boolean;
/** @experimental */
type: 'video' | 'pseudo' | 'native';
/** @deprecated Use `type`. */
video: boolean;
}
IframePlayerApi.Events.PipChange
- Изменение режима картинка в картинке. Совместимость с браузерами: https://caniuse.com/picture-in-picture.
{
isPip: boolean;
}
IframePlayerApi.Events.CallAction
- Вызов действия (CTA). @experimental
{
id: string;
}
IframePlayerApi.Events.CallBookmark
- Нажатие на закладку. @experimental
{
id: string;
time: number;
}
IframePlayerApi.Events.Error
- Критическая ошибка. @experimental
{
error: unknown;
}
IframePlayerApi.Events.Destroy
- Плеер удален из DOM.
У события нет данных.