Пример конвертации видеопотока в HLS и отображения его в браузере при помощи VideoJS

Данный плеер демонстрирует возможности WCS по преобразованию опубликованного на сервере потока в HLS и воспроизведению его в браузере. Транскодирование Нарезка потока в HLS запускается автоматически, при обращении к потоку, опубликованному на сервере, по HLS URL, например, для потока на рисунке ниже httpshttp://demo.flashphoner.com:8445/e442/e442localhost:8082/test/test.m3u8

Image RemovedImage Added

Код примера

Код данного примера находится на сервере по следующему пути:

...

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 - скрипт, обеспечивающий работу плеера (минимизированная версия)

Тестировать данный пример можно по следующему адресу:

https://host:8888/client2/examples/demo/streaming/hls-player/hls-player.html

Здесь host - адрес вашего WCS-сервера.

Работа с кодом примера

Для разбора кода возьмем версию файла hls-player.js с хешем c306c1bbf49bfcbd8e24be927ae95f63b7dbaaba ecbadc3, которая находится здесь и доступна для
скачивания в соответствующей сборке 2.0.5.28212.2747.

1. Определение HLS URL сервера

getHLSUrl() код code

function initPage() {
    $("#urlServer#header").val(getHLSUrl());
    var player = videojs('remoteVideo');
    var applyFn = function () {
        var streamName = $("#playStream").val();
        streamName = encodeURIComponent(streamName);
        player.src({
            src: text("HLS VideoJS Player Minimal");
    $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8",
            type: "application/vnd.apple.mpegurl"
        });
    (getHLSUrl());
    player.play();
    };
    $("#applyBtn").prop('disabled', false).click(applyFn);

}

2. Инициализация плеера

videojs() код code

Плееру передается имя div-элемента, в котором должен быть проигран поток.

function initPage() {
    $("#urlServer").val(getHLSUrl());...
    var playerremoteVideo = videojsdocument.getElementById('remoteVideo');
    remoteVideo.className = "video-js vjs-default-skin";
   var applyFnplayer = videojs(remoteVideo);
}

3. Определение имени потока (должен быть опубликован на сервере)

encodeURIComponent() code

function playBtnClick() {
    if (validateForm()) {
        var streamName = $("'#playStream"').val();
        streamName = encodeURIComponent(streamName);
        ...
    player.src({
  }
}

4. Формирование URL HLS-потока и запуск плеера

player.play() code

Если указаны ключ и токен авторизации, они будут включены в URL потока

function playBtnClick() {
    if (validateForm()) {
        ...
        var videoSrc src:= $("#urlServer").val() + "'/"' + streamName + "'/"' + streamName + "'.m3u8",';
        var key   type: "application/vnd.apple.mpegurl"
        }= $('#key').val();
        player.play();
    };
    var token = $("#applyBtn#token").prop('disabled', false).click(applyFn);

}

3. Определение имени потока (должен быть опубликован на сервере)

encodeURIComponent() код

function initPage() {
    $("#urlServer").val(getHLSUrl());
    var player = videojs('remoteVideo');val();
        if (key.length > 0 && token.length > 0) {
    var applyFn = function () {
   videoSrc += "?" + key var+ streamName"=" = $("#playStream").val()+ token;
        streamName = encodeURIComponent(streamName);}
        player.src({
            src: $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8"videoSrc,
            type: "application/vnd.apple.mpegurl"
        });
        playerconsole.play(log("Play with VideoJs");
      }  player.play();
    $("#applyBtn").prop('disabled', false).click(applyFn    onStarted();
    }
}

4. Формирование URL HLS-потока и запуск плеера5. Остановка воспроизведения

player.playdispose() код code

Этот метод удаляет со страницы div элемент, в котором был ранее инициализирован плеер

function initPagestopBtnClick() {
    $("#urlServer").val(getHLSUrl());
if (player != null) {
     var player = videojs('remoteVideo'console.log("Stop VideoJS player");
    var applyFn = function //player.pause() {;
        var streamName = $("#playStream").valplayer.dispose();
    }
    streamName = encodeURIComponentonStopped(streamName);
}

6. Создание нового div элемента и плеера в нем после остановки предыдущего плеера

code

function createRemoteVideo(parent) {
    remoteVideo = playerdocument.src({
createElement("video");
    remoteVideo.id = "remoteVideo";
    remoteVideo.width=852;
   src: $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8", remoteVideo.height=480;
    remoteVideo.controls="controls";
    remoteVideo.autoplay="autoplay";
            type: remoteVideo.type="application/vnd.apple.mpegurl";
    remoteVideo.className =   })"video-js vjs-default-skin";
        player.play(parent.appendChild(remoteVideo);
    };
player =   $("#applyBtn").prop('disabled', false).click(applyFn);
videojs(remoteVideo);
}