Table of Contents |
---|
Пример конвертации видеопотока в HLS и отображения его в браузере, поддерживающем HLS
Данный плеер демонстрирует возможности WCS по преобразованию опубликованного на сервере потока в HLS и воспроизведению его в браузере. Нарезка потока в HLS запускается автоматически, при обращении к потоку, опубликованному на сервере, по HLS URL, например, для потока на рисунке ниже https://demo.flashphoner.com:8445/test/test.m3u8
Код примера
Код данного примера находится на сервере по следующему пути:
...
Здесь host - адрес вашего WCS-сервера.
Работа с кодом примера
Для разбора кода возьмем версию файла hls-native.js с хешем 51703a2 ecbadc3, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.5.28.2753.141.212.
1. Определение HLS URL сервера
getHLSUrl() code
Code Block | ||||
---|---|---|---|---|
| ||||
function initPage() { $("#header").text("HLS Native Player Minimal"); $("#urlServer").val(getHLSUrl()); ... } |
2. Настройка div элемента для передачи плееру
Плееру передается имя div-элемента, в котором должен быть проигран поток.
...
3. Определение имени потока (должен быть опубликован на сервере)
encodeURIComponent() code
Code Block | ||||
---|---|---|---|---|
| ||||
function playBtnClick() { if (validateForm()) { var streamName = $('#playStream').val(); streamName = encodeURIComponent(streamName); ... } } |
4. Формирование URL HLS-потока
Если указаны ключ и токен авторизации, они будут включены в URL потока
Code Block | ||||
---|---|---|---|---|
| ||||
function playBtnClick() { if (validateForm()) { ... var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8'; var key = $('#key').val(); var token = $("#token").val(); if (key.length > 0 && token.length > 0) { videoSrc += "?" + key + "=" + token; } ... } } |
5. Запуск плеера
Если браузер не поддерживает воспроизедение воспроизведение HLS, плеер не запустится, будет выведено предупреждение
...
6. Остановка воспроизведения
Code Block | ||||
---|---|---|---|---|
| ||||
function stopBtnClick() { if (remoteVideo != null) { console.log("Stop HTML5 player"); remoteVideo.pause(); remoteVideo.currentTime = 0; remoteVideo.removeAttribute('src'); remoteVideo.load(); } onStopped(); } |