Видеоплеер

Подключение

Объект BX.UI.VideoPlayer.PlayerManager предоставляет доступ к плеерам на странице. Метод getPlayerById возвращает объект по его идентификатору:

BX.Fileman.PlayerManager.getPlayerById(
    playerId
)

BX.UI.VideoPlayer.Player создает объект для каждого плеера на странице.

JS

import { Player } from 'ui.video-player'; // es6
new Player(id, params);
 
new BX.UI.VideoPlayer.Player(id, params); // es5

PHP

\Bitrix\Main\UI\Extension::load('ui.video-player');

Параметры

Параметр params

Методы

Получить объект плеера:

var player = BX.UI.VideoPlayer.PlayerManager.getPlayerById(
    playerId
);

Методы работы с объектом плеера:

{
    src: 'путь к файлу',
    type: 'mime-type'
}

Пример

Код создает видеоплеер на веб-странице, который воспроизводит указанное видео.

// Импортируем Player
import { Player } from 'ui.video-player';
 
// Создаем новый объект плеера с идентификатором 'player_id'
const player = new Player(
    'player_id',
	{
		// Указываем источник видео
		sources: [
			{
				src: 'https://dev.1c-bitrix.ru/download/files/video/learning/hermitage.mp4', // URL видеофайла
				type: 'video/mp4' // Тип видеофайла
			}
		],
		autostart: true, // Автоматически запускать воспроизведение
		width: 640, // Установить ширину плеера
		height: 360 // Установить высоту плеера
	}
);
 
// Создаем HTML-элемент для плеера
const playerNode = player.createElement();
 
// Находим элемент на странице с идентификатором 'video'
const node = document.getElementById('video');
 
// Добавляем созданный элемент плеера в найденный элемент на странице
node.appendChild(playerNode);
 
// Инициализируем плеер
player.init();