Для создания плеера используется объект (фабрика) со следующими свойствами и методами:
PlayerEvent: PlayerEvent
create(elementId: string, options: CreateOptions): Promise<IframePlayerController>
Создать плеер. Если элемент с id elementId
не является <iframe>
, то этот элемент будет заменен на элемент <iframe>
, иначе будет использован указанный элемент <iframe>
для встраивания плеера. Вторым аргументом передается объект с параметрами плеера. Возвращается Promise
с плеером (объект управления плеером).
Если плеер с указанным id уже существует, то вернется экземпляр ранее созданного плеера.
После создания плеера нельзя самостоятельно удалять элемент с id
elementId
или изменять url<iframe>
. Для удаления плеера используйте методdestroy
.При пересоздании плеера необходимо дождаться завершения выполнения метода
destroy
, затем самостоятельно создать элемент с idelementId
и только после этого вызвать методcreate
.
interface CreateOptions {
/** Url видео */
url: string;
/** Настройки размера */
size?: {
/** Ширина плеера. */
width?: number | string;
/** Высота плеера. */
height?: number | string;
};
/** Настройки поведения */
behaviour?: {
/**
* Автоматический запуск плеера.
* Если не удалось начать воспроизведение со звуком, то плеер попытается начать воспроизведение с выключенным звуком.
*
* `viewable` - автоматический запуск при появлении плеера в области видимости на странице.
* Применимо когда плеер находится внизу страницы и до его появления нужно прокрутить страницу.
*/
autoPlay?: boolean | 'viewable';
/** Ставить на паузу (если `true`) или сбрасывать на начальное состояние (если `reset`), если другой плеер на странице начал проигрывание. По умолчанию `true`. */
autoPause?: boolean | 'reset';
/** Выключить звук. */
muted?: boolean;
/** Зацикленное видео. */
loop?: boolean;
/** Воспроизводить видео на мобильных устройствах не переходя автоматически в полноэкранный режим. По умолчанию `true`. */
playsInline?: boolean;
/**
* - `none`, `false` - не осуществлять предзагрузку видео (только постер, экономия ресурсов страницы). По умолчанию для мобильных устройств.
* - `metadata`, `true` - предварительно загружаются необходимые данные видео. По умолчанию (кроме мобильных устройств).
* - `auto` - предзагрузка на усмотрение браузера и видео драйвера.
*/
preload?: boolean | 'none' | 'metadata' | 'auto';
/** Запоминать время воспроизведения, настройки субтитров и т.д. По умолчанию `true`. */
localStorage?:
| boolean
| {
/**
* - `item` - запоминать для каждого ролика отдельно.
* - true | `global` - запоминать глобально, на все ролики.
* - false - не запоминать.
* По умолчанию `global`.
*/
quality?: 'item' | 'global' | boolean;
/** @experimental Запоминать время. */
time?: boolean;
/** @experimental Запоминать язык субтитров. Аналогично `quality`. */
textTrack?: 'item' | 'global' | boolean;
};
/**
* @experimental
* В случае, если браузер не поддерживает полноэкранный режим для элементов можно указать запасной вариант.
* - `video` - полноэкранный режим видео элемента. Применяется в iOS.
* - `pseudo` - растянуть плеер в окне браузера поверх всех других элементов (псевдофулскрин).
* По умолчанию `video`.
*/
fullscreenFallback?: 'video' | 'pseudo';
};
/** Настройки UI */
ui?: {
/** Язык плеера. По умолчанию язык браузера или английский язык. */
language?: 'ru' | 'en';
/** Показывать ли элементы управления плеером. По умолчанию `true`. */
controls?: boolean;
/** Большая кнопка Play в центре плеера, по умолчанию `true`. */
mainPlayButton?: boolean;
/** Показывать ли кнопку выбора скорости воспроизведения. */
playbackRateButton?: boolean;
/** @experimental Водяной знак. */
watermark?:
| string
| {
/** Текст */
text: string;
/**
* - `stripes` - линиями;
* - `random` - в случайных местах;
* По умолчанию `stripes`.
*/
mode?: 'stripes' | 'random';
/** @experimental Коэффициент масштабирования размера текста в зависимости от размера плеера. По умолчанию `0.25`. */
scale?: number;
/** @experimental Длительность показа/скрытия (мс). Если не указано, текст показывается постоянно. */
displayTimeout?: number | { visible: number; hidden: number };
};
};
/** Настройки для плеера. */
settings?: {
/** Какой-либо пользовательский идентификатор. Используется для отправки метрик. */
externalId?: string;
};
/**
* Настройки, относящиеся к ролику: заголовки, субтитры, drm и т.д.
* См. метод плеера `setPlaylistItemOptions`.
*/
playlist: PlaylistItemOptions[];
}
getById(elementId: string): IframePlayerController | undefined
Возвращает созданный ранее плеер по id элемента.
getAll(): IframePlayerController[]
Возвращает список созданных плееров.