Ксения Петрова
6.5 KiB
6.5 KiB
Документация по интеграции и работе с видеоплеером
1. Подключение плеера
1.1. Базовое подключение
Для интеграции плеера на страницу выполните следующие шаги:
- Добавьте скрипт плеера в
<head>вашей HTML-страницы:
<script src="vokaPlayer.global.js"></script>
1.1 Если требуется поддержка chromecast, добавьте также CAST SDK
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<script src="vokaPlayer.global.js"></script>
- Создайте контейнер для плеера:
<div id="player-container"></div>
- Инициализируйте плеер в скрипте:
const player = spbtvplayer('player-container', {
// Конфигурационные параметры
features: {
api: true
}
});
1.2. Альтернативные способы подключения
Исходники можно подготовить также для сборки и распространения в качестве npm-пакета, но это выходит за рамки проекта.
2. Конфигурация плеера
2.1. Основные параметры
Полный список всех доступных параметров конфигурации смотрите в документации по опциям.
Пример типичной конфигурации:
const options = {
features: {
api: true,
drm: false,
metrics: true
},
uiConfig: {
initAsLive: true
},
controls: {
zoomButton: {
isVisible: true
}
}
};
Поддержка субтитров
{
controls: {
externalSubtitles: {
url: "path/to/subtitles.vtt",
lang: 'ru'
}
}
}
3. Управление плеером
3.1. Основные методы
Полный список методов доступен в документации по API.
Примеры использования:
// Инициализация
player.afterInitialize(() => {
console.log("Плеер готов к работе");
});
// Управление воспроизведением
player.play();
player.pause();
player.seek(120); // Переход на 2 минуты
// Получение информации
const currentTime = player.getCurrentTime();
const isPaused = player.getPaused();
3.2. Работа с событиями
player.addEventListener('play', () => {
console.log('Воспроизведение начато');
});
player.addEventListener('error', (error) => {
console.error('Ошибка:', error);
});
4. Кастомизация интерфейса
Подробные инструкции по изменению внешнего вида плеера доступны в документации по кастомизации.
Основные возможности:
- Добавление собственных SVG-иконок
- Изменение расположения элементов управления
- Адаптация под различные разрешения экрана
5. Расширение функциональности
Плеер поддерживает следующие технологии воспроизведения (Tech):
| Технология | Описание | Типы контента | Платформы |
|---|---|---|---|
| VokaHlsTech | Воспроизведение HLS-потоков | .m3u8, Live/VOD |
Все платформы |
| VokaDashTech | Воспроизведение DASH-потоков | .mpd, DRM-контент |
Все платформы |
| VokaMp4Tech | Воспроизведение MP4-видео | .mp4 |
Все платформы |
| VokaWebOSTech | Оптимизированная технология для WebOS | HLS, MP4 | Телевизоры LG WebOS |
| VokaTizenTech | Оптимизированная технология для Tizen | HLS, MP4 | Телевизоры Samsung Tizen |
| VokaAppleTech | Нативная интеграция с Apple-устройствами | HLS, FairPlay DRM | iOS, tvOS |
| VokaEmptyTech | Заглушка для тестирования | - | Тестовые среды |
| Chromecast | https://developers.google.com/cast/docs/overview | HLS, DASH, MP4 | При поддрежке CAST SDK и наличие ресивера в сети |
| VokaLogPlugin | Плагин логирования | - | Тестовые среды |
5.2. Создание плагинов
Плагины размещаются в src/plugins/. Пример структуры плагина:
class CustomPlugin {
constructor(player, options) {
// Инициализация
}
dispose() {
// Очистка ресурсов
}
}
Плагин добавляется в VokaCorePlayer.ts
plugins.CustomPlugin = {
optionsPlugin,
}
Готовые плагины:
VokaKeyboardPlugin- управление с клавиатурыVokaMetricsPlugin- сбор метрик просмотраVokaHeartbeatPlugin- плагин для отправки heartbeat-сигналов на серверVokaMagicRemotePlugin- поддержка TV-пультовVokaEventsMapperPlugin- связывает различные компоненты плеера через единую шину событий.vendors/@silvermine/videojs-chromecast- отправка медиа на Chromecast-ресивер
Подробнее про плагины тут