Ксения Петрова
166 lines
6.5 KiB
Markdown
166 lines
6.5 KiB
Markdown
# Документация по интеграции и работе с видеоплеером
|
|
|
|
## 1. Подключение плеера
|
|
|
|
### 1.1. Базовое подключение
|
|
Для интеграции плеера на страницу выполните следующие шаги:
|
|
|
|
1. Добавьте скрипт плеера в `<head>` вашей HTML-страницы:
|
|
```html
|
|
<script src="vokaPlayer.global.js"></script>
|
|
```
|
|
|
|
1.1 Если требуется поддержка chromecast, добавьте также CAST SDK
|
|
```html
|
|
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
|
|
<script src="vokaPlayer.global.js"></script>
|
|
```
|
|
|
|
2. Создайте контейнер для плеера:
|
|
```html
|
|
<div id="player-container"></div>
|
|
```
|
|
|
|
3. Инициализируйте плеер в скрипте:
|
|
```javascript
|
|
const player = spbtvplayer('player-container', {
|
|
// Конфигурационные параметры
|
|
features: {
|
|
api: true
|
|
}
|
|
});
|
|
```
|
|
|
|
### 1.2. Альтернативные способы подключения
|
|
Исходники можно подготовить также для сборки и распространения в качестве npm-пакета, но это выходит за рамки проекта.
|
|
|
|
## 2. Конфигурация плеера
|
|
|
|
### 2.1. Основные параметры
|
|
Полный список всех доступных параметров конфигурации смотрите в [документации по опциям](./options.md).
|
|
|
|
Пример типичной конфигурации:
|
|
```javascript
|
|
const options = {
|
|
features: {
|
|
api: true,
|
|
drm: false,
|
|
metrics: true
|
|
},
|
|
uiConfig: {
|
|
initAsLive: true
|
|
},
|
|
controls: {
|
|
zoomButton: {
|
|
isVisible: true
|
|
}
|
|
}
|
|
};
|
|
```
|
|
|
|
#### Поддержка субтитров
|
|
```javascript
|
|
{
|
|
controls: {
|
|
externalSubtitles: {
|
|
url: "path/to/subtitles.vtt",
|
|
lang: 'ru'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## 3. Управление плеером
|
|
|
|
### 3.1. Основные методы
|
|
Полный список методов доступен в [документации по API](./methods.md).
|
|
|
|
Примеры использования:
|
|
```javascript
|
|
// Инициализация
|
|
player.afterInitialize(() => {
|
|
console.log("Плеер готов к работе");
|
|
});
|
|
|
|
// Управление воспроизведением
|
|
player.play();
|
|
player.pause();
|
|
player.seek(120); // Переход на 2 минуты
|
|
|
|
// Получение информации
|
|
const currentTime = player.getCurrentTime();
|
|
const isPaused = player.getPaused();
|
|
```
|
|
|
|
### 3.2. Работа с событиями
|
|
```javascript
|
|
player.addEventListener('play', () => {
|
|
console.log('Воспроизведение начато');
|
|
});
|
|
|
|
player.addEventListener('error', (error) => {
|
|
console.error('Ошибка:', error);
|
|
});
|
|
```
|
|
|
|
## 4. Кастомизация интерфейса
|
|
|
|
Подробные инструкции по изменению внешнего вида плеера доступны в [документации по кастомизации](./design.md).
|
|
|
|
Основные возможности:
|
|
- Добавление собственных SVG-иконок
|
|
- Изменение расположения элементов управления
|
|
- Адаптация под различные разрешения экрана
|
|
|
|
## 5. Расширение функциональности
|
|
|
|
[Как добавить новую технологию](./tech.md)
|
|
|
|
##### Плеер поддерживает следующие технологии воспроизведения (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/`. Пример структуры плагина:
|
|
|
|
```typescript
|
|
class CustomPlugin {
|
|
constructor(player, options) {
|
|
// Инициализация
|
|
}
|
|
|
|
dispose() {
|
|
// Очистка ресурсов
|
|
}
|
|
}
|
|
```
|
|
|
|
Плагин добавляется в `VokaCorePlayer.ts`
|
|
```typescript
|
|
plugins.CustomPlugin = {
|
|
optionsPlugin,
|
|
}
|
|
```
|
|
|
|
Готовые плагины:
|
|
- `VokaKeyboardPlugin` - управление с клавиатуры
|
|
- `VokaMetricsPlugin` - сбор метрик просмотра
|
|
- `VokaHeartbeatPlugin` - плагин для отправки heartbeat-сигналов на сервер
|
|
- `VokaMagicRemotePlugin` - поддержка TV-пультов
|
|
- `VokaEventsMapperPlugin` - связывает различные компоненты плеера через единую шину событий.
|
|
- `vendors/@silvermine/videojs-chromecast` - отправка медиа на Chromecast-ресивер
|
|
|
|
Подробнее про плагины [тут](./plugins.md)
|