# Инструкция для встраивания плеера 1. Подключить плеер: ```html <script src="https://player.mediacdn.ru/smplayer.min.js"></script> ``` 2. Указать тег `<video>`. Он будет являться контейнером для плеера. ```html <video id="example-video" width="800" height="500" class="video-js vjs-skin-flat-smivan" controls></video> ``` 3. Разместить JavaScript код следующего содержания: ```javascript <script> /** * Пользовательские параметры плеера * * @videoTagId - id тега video * @streams - массив ссылок на потоки вещания, где src - это ссылка на поток, type - тип потока * @adLink - ссылка на рекламу * @googleAnalyticsId - идентификатор в Google Analytics * @customCss - ссылка на собственную таблицу стилей */ var options = { videoTagId: 'example-video', streams: [ { src : '<Link to playlist or file>', type: '<MIME-type>' } ], adLink: '<Link to AD>', googleAnalyticsId: '<Google Analytics ID>', customCss: '<link to custom CSS>', autoplay: true, debug: true }; this.initPlayer(options); </script> ``` # Конфигурирование ### Параметры плеера Имя | Тип | Описание --- | --- | -------- videoTagId | string | Идентификатор контейнера плеера (см. шаг 1) streams | Array | Массив объектов с полями src и type, где src (string) - путь к плейлисту, а type (string) - MIME-тип видео adLink | string | ссылка на рекламу googleAnalyticsId | string | Идентификатор Google Analytics customCss | string | Опциональный параметр. Ссылка на сторонний файл с таблицами стилей. Если указан, то ссылка будет встроена в страницу с плеером. debug | boolean | Опциональный параметр. Если флаг выставлен в true, то в консоль будет выводится информация по работе плеера. autoplay | boolean | Опциональный параметр. Если флаг выставлен в true, то воспроизведение начнется автоматически после загрузки страницы. # Смена темы плеера Для смены темы оформления плеера необходимо: 1. Создать файл css со стилем оформления 2. Прописать путь к файлу в параметре плеера `customCss` (см. выше) 3. Заменить класс `vjs-skin-flat-smivan` из тега `<video>` на ваш Например, вместо ```html <video id="example-video" width="800" height="500" class="video-js vjs-skin-flat-smivan" controls></video> ``` будет ```html <video id="example-video" width="800" height="500" class="video-js your-custom-style" controls></video> ``` где `your-custom-style` - класс вашего стиля оформления # Пример встраивания плеера ```javascript <!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример встраивания плеера</title> <script src="https://player.mediacdn.ru/smplayer.min.js"></script> </head> <body> <video id="example-video" width="800" height="500" class="video-js vjs-skin-flat-smivan" controls></video> <script> /** * Пользовательские параметры плеера * * @videoTagId - id тега video * @streams - массив ссылок на потоки вещания, где src - это ссылка на поток, type - тип потока * @adLink - ссылка на рекламу * @googleAnalyticsId - идентификатор в Google Analytics * @customCss - ссылка на собственную таблицу стилей */ var options = { videoTagId: 'example-video', streams: [ { src : 'https://live2.mediacdn.ru/sr1/sever/playlist.m3u8', type: 'application/x-mpegURL' }, { src : 'http://10.1.140.44/big_buck_bunny_720p_stereo_2M_br_cut.mp4', type: 'video/mp4' } ], adLink: 'https://data.videonow.ru/?profile_id=1634796&format=vast&container=preroll', googleAnalyticsId: 'UA-91028618-1', customCss: '../dist/custom.css', autoplay: true }; this.initPlayer(options); </script> </body> </html> ```