...
Для разбора кода возьмем версию файла hls-player.js с хешем c306c1bbf49bfcbd8e24be927ae95f63b7dbaaba, которая находится здесь и доступна для
скачивания в соответствующей сборке 0.5.28.2747.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
function initPage() {
$("#urlServer").val(getHLSUrl());
var player = videojs('remoteVideo');
var applyFn = function () {
var streamName = $("#playStream").val();
streamName = encodeURIComponent(streamName);
player.src({
src: $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8",
type: "application/vnd.apple.mpegurl"
});
player.play();
};
$("#applyBtn").prop('disabled', false).click(applyFn);
} |
2. Инициализация плеера
videojs() код
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
function initPage() {
$("#urlServer").val(getHLSUrl());
var player = videojs('remoteVideo');
var applyFn = function () {
var streamName = $("#playStream").val();
streamName = encodeURIComponent(streamName);
player.src({
src: $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8",
type: "application/vnd.apple.mpegurl"
});
player.play();
};
$("#applyBtn").prop('disabled', false).click(applyFn);
} |
3. Определение имени потока (должен быть опубликован на сервере)
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
function initPage() {
$("#urlServer").val(getHLSUrl());...
var player = videojs('remoteVideo');
var applyFn = function () {
var streamName = $("#playStream").val();
streamName = encodeURIComponent(streamName);
player.src({
src: $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8",
type: "application/vnd.apple.mpegurl"
});
player.play();
};
$("#applyBtn").prop('disabled', false).click(applyFn);
} |
4. Формирование URL HLS-потока и запуск плеера
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
function initPage() {
$("#urlServer").val(getHLSUrl());...
var player = videojs('remoteVideo');
var applyFn = function () {
var streamName = $("#playStream").val();
streamName = encodeURIComponent(streamName);...
player.src({
src: $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8",
type: "application/vnd.apple.mpegurl"
});
player.play();
};
$("#applyBtn").prop('disabled', false).click(applyFn);
} |
...