Пример конвертации видеопотока в HLS и отображения его в браузере
Данный плеер демонстрирует возможности WCS по преобразованию опубликованного на сервере потока в HLS и воспроизведению его в браузере. Транскодирование Нарезка потока в HLS запускается автоматически, при обращении к потоку, опубликованному на сервере, по HLS URL, например, для потока на рисунке ниже https://demo.flashphoner.com:8445/e442test/e442test.m3u8
Код примера
Код данного примера находится на сервере по следующему пути:
...
hls-player.css - файл стилей страницы с плеером
video-js.css - файл стилей HLS-плеера
hls-player.html - страница с плеером
hls-player.js - скрипт, обеспечивающий запуск плеера
player-page.html - общие элементы страницы плеера для трех примеров воспроизведения HLS
video.js - скрипт, обеспечивающий работу плеера (http://videojs.com/, Apache License Version 2.0)
videojs-hls.min.js - скрипт, обеспечивающий работу плеера (минимизированная версия)
...
Здесь host - адрес вашего WCS-сервера.
Работа с кодом примера
Для разбора кода возьмем версию файла hls-player.js с хешем 66cc39351703a2, которая находится здесь и доступна для скачивания в соответствующей сборке 0.5.28.2753.133141.
1. Определение HLS URL сервера
getHLSUrl() code
Code Block | ||||
---|---|---|---|---|
| ||||
function initPage() { $("#header").text("HLS VideoJS Player Minimal"); $("#urlServer").val(getHLSUrl()); ... } |
2. Инициализация плеера
videojs() code
Плееру передается имя div-элемента, в котором должен быть проигран поток.
Code Block | ||||
---|---|---|---|---|
| ||||
function initPage() { $("#urlServer").val(getHLSUrl());... var playerremoteVideo = videojsdocument.getElementById('remoteVideo'); ...remoteVideo.className = "video-js vjs-default-skin"; player = videojs(remoteVideo); } |
3. Определение имени потока (должен быть опубликован на сервере)
encodeURIComponent() code
Code Block | ||||
---|---|---|---|---|
| ||||
function initPageplayBtnClick() { ... var applyFn = function ()if (validateForm()) { var streamName = $("'#playStream"').val(); streamName = encodeURIComponent(streamName); ... }; ... } |
4. Формирование URL HLS-потока и запуск плеера
player.play() code
Если указаны ключ и токен авторизации, они будут включены в URL потока
Code Block | ||||
---|---|---|---|---|
| ||||
function initPageplayBtnClick() { ... var applyFn = function ()if (validateForm()) { ... var srcvideoSrc = $("#urlServer").val() + "'/"' + streamName + "'/"' + streamName + "'.m3u8"'; var key = $('#key').val(); var token = $("#token").val(); if (key.length > 0 && token.length > 0) { srcvideoSrc += "?" + key + "=" + token; } player.src({ src: srcvideoSrc, type: "application/vnd.apple.mpegurl" }); console.log("Play with VideoJs"); player.play(); };onStarted(); } } |
5. Остановка воспроизведения
player.pause() code
Code Block | ||||
---|---|---|---|---|
| ||||
function stopBtnClick() { $("#applyBtn").prop('disabled', false).click(applyFn); if (player != null) { console.log("Stop VideoJS player"); player.pause(); } onStopped(); } |