# Документация по интеграции и работе с видеоплеером
## 1. Подключение плеера
### 1.1. Базовое подключение
Для интеграции плеера на страницу выполните следующие шаги:
1. Добавьте скрипт плеера в `` вашей HTML-страницы:
```html
```
1.1 Если требуется поддержка chromecast, добавьте также CAST SDK
```html
```
2. Создайте контейнер для плеера:
```html
```
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)