Создание плеера
Для создания плеера используется объект (фабрика) со следующими свойствами и методами:
Методы
create(elementId: string, options: CreateOptions): Promise<IframePlayerApi>
Создать плеер. Если элемент с id
elementId
не является<iframe>
, то этот элемент будет заменен на элемент<iframe>
, иначе будет использован указанный элемент<iframe>
для встраивания плеера. Вторым аргументом передается объект с параметрами плеера. ВозвращаетсяPromise
с плеером (объект управления плеером).
Если плеер с указанным id уже существует, то вернется экземпляр уже существующего плеера.После создания плеера нельзя самостоятельно удалять элемент с id
elementId
или изменять url<iframe>
. Для удаления плеера используйте методdestroy
.При пересоздании плеера необходимо дождаться завершения выполнения метода
destroy
(элемент с idelementId
будет удален из DOM), затем самостоятельно создать элемент с idelementId
и только после этого вызвать методcreate
.interface CreateOptions { /** Url видео */ url: string; /** Настройки размера */ size?: { /** Ширина плеера. */ width?: number | string; /** Высота плеера. */ height?: number | string; }; /** Настройки поведения */ behavior?: { /** * - `none`, `false` - не осуществлять предзагрузку видео (только постер, экономия ресурсов страницы). По умолчанию для мобильных устройств. * - `metadata`, `true` - предварительно загружаются необходимые данные видео. По умолчанию (кроме мобильных устройств). * - `auto` - предзагрузка на усмотрение браузера и видео драйвера. */ preload?: boolean | 'none' | 'metadata' | 'auto'; /** Запоминать время воспроизведения, настройки субтитров и т.д. По умолчанию `true`. */ localStorage?: | boolean | { /** * - `item` - запоминать для каждого ролика отдельно. * - true | `global` - запоминать глобально, на все ролики. * - false - не запоминать. * По умолчанию `global`. */ quality?: 'item' | 'global' | boolean; /** Запоминать время. */ time?: boolean; /** Запоминать язык субтитров. Аналогично `quality`. */ textTrack?: 'item' | 'global' | boolean; }; /** * В случае, если браузер не поддерживает полноэкранный режим для элементов можно указать запасной вариант. * - `video` - полноэкранный режим видео элемента. Применяется в iOS. * - `pseudo` - растянуть плеер в окне браузера поверх всех других элементов (псевдофулскрин). * По умолчанию `video`. */ fullscreenFallback?: 'video' | 'pseudo'; /** Воспроизводить видео на мобильных устройствах не переходя автоматически в полноэкранный режим. По умолчанию `true`. */ playsInline?: boolean; /** Зацикленное видео. */ loop?: boolean; /** * Автоматический запуск плеера. * Если не удалось начать воспроизведение со звуком, то плеер попытается начать воспроизведение с выключенным звуком. * * `viewable` - автоматический запуск при появлении плеера в области видимости на странице. * Применимо когда плеер находится внизу страницы и до его появления нужно прокрутить страницу. */ autoPlay?: boolean | 'viewable'; /** Ставить на паузу (если `true`) или сбрасывать на начальное состояние (если `reset`), если другой плеер на странице начал проигрывание. По умолчанию `true`. */ autoPause?: boolean | 'reset'; /** * @experimental * * `visible` - воспроизведение приостанавливается, если плеер вне области видимости на странице. */ playback?: 'visible'; /** Выключить звук. */ muted?: boolean; }; /** Настройки UI */ ui?: { /** Язык плеера. По умолчанию язык браузера или английский язык. */ language?: 'ru' | 'en'; /** Показывать ли элементы управления плеером. По умолчанию `true`. */ controls?: boolean; /** Большая кнопка Play в центре плеера, по умолчанию `true`. */ mainPlayButton?: boolean; /** Показывать ли кнопку выбора скорости воспроизведения. */ playbackRateButton?: boolean; }; /** Настройки темы. */ theme?: { subtitles?: { /** Base font size in em. */ textSize: number; textAlign: 'left' | 'center'; textLength: 'auto' | number; }; }; /** Настройки для плеера. */ settings?: { /** Какой-либо пользовательский идентификатор. Используется для отправки метрик. */ externalId?: string; }; /** * Настройки, относящиеся к ролику: заголовки, субтитры, drm и т.д. * См. метод плеера `setPlaylistItemOptions`. */ playlist: PlaylistItemOptions[]; }
getById(elementId: string): IframePlayerApi | undefined
Возвращает ранее созданный плеер по id элемента.
-
Возвращает список созданных плееров.
Рекомендации
Для исключения возможности изменения/удаления водяного знака через атрибут
src
вiframe
, параметры водяного знака следует устанавливать после создания плеера путем вызова метода setOptions.Например:
playerFactory.create(params).then(function (player) { player.setOptions({ ui: { watermark: { text: 'watermark' } } }); });