Table of Contents |
---|
...
Описание
Данный плеер пример демонстрирует возможности WCS по преобразованию опубликованного на сервере потока в HLS и воспроизведению его в браузере, поддерживающем HLS без дополнительных библиотек (на уровне тэга video). Нарезка потока в HLS запускается автоматически, при обращении к потоку, опубликованному на сервере, по HLS URL, например, для потока на рисунке ниже `https://demotest1.flashphoner.com:8445/test/test.m3u8`
Начиная со сборки 2.0.244, пример поддерживает следующие параметры:
- src - полный HLS URL потока для проигрывания, должен быть закодирован при помощи URI encode, например
https%3A%2F%2Ftest1.flashphoner.com%3A8445%2Ftest%2Ftest.m3u8
...
- autoplay - автоматически запустить проигрывание указанного HLS URL, при этом все поля ввода и кнопки скрываются:
false
(по умолчанию) илиtrue
Пример открытия плеера с параметрами, как на скриншоте выше (ссылка в поле Permalink
)
Code Block | ||
---|---|---|
| ||
https://test1.flashphoner.com:8444/client2/examples/demo/streaming/hls-native/hls-native.html?src=https%3A%2F%2Ftest1.flashphoner.com%3A8445%2Ftest%2Ftest.m3u8 |
Пример вызова плеера с автозапуском
Code Block | ||
---|---|---|
| ||
https://test1.flashphoner.com:8444/client2/examples/demo/streaming/hls-js-player/hls-js-player.html?src=https%3A%2F%2Ftest1.flashphoner.com%3A8445%2Ftest%2Ftest.m3u8&autoplay=true |
При этом воспроизведение потока будет запущено автоматически, с отключенным звуком. Для включения звука зритель должен использовать кнопку регулятора громкости в интерфейсе плеера.
Код примера
Код данного примера находится на сервере по следующему пути:
/usr/local/FlashphonerWebCallServer/client2/examples/demo/streaming/hls-js-playernative
hls-native.css - файл стилей страницы с плеером
hls-native.html - страница с плеером
hls-native.js - скрипт, обеспечивающий запуск плеера
../hls-player/player-page.html - общая страница плеера для трех HLS примеров
Тестировать данный пример можно по следующему адресу:
...
Для разбора кода возьмем версию файла hls-native.js с хешем ecbadc3 1703e13, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.212244.
1. Определение HLS URL сервераgetHLSUrl() Загрузка страницы плеера
Code Block | ||||
---|---|---|---|---|
| ||||
function initPageconst loadPlayerPage = function() { $loadPage("#header").text("HLS Native Player Minimal"); $("#urlServer").val(getHLSUrl()); ... } |
2. Настройка div элемента для передачи плееру
...
../hls-player/player-page.html", "playerPage", initPage );
} |
2. Инициализация HTML-страницы плеера
Если браузер не поддерживает проигрывание HLS, плеер не будет инициализирован, и будет выведено предупреждение
Code Block | ||||
---|---|---|---|---|
| ||||
const initPage = function initPage(() { if (playSrc) { setValue("fullLink", decodeURIComponent(playSrc)); } else if (autoplay) { ... console.warn("No HLS URL set, autoplay disabled"); autoplay = false; } remoteVideo = document.getElementById('remoteVideo'); remoteVideo.style ="background-color: lightgrey;"; } |
3. Определение имени потока (должен быть опубликован на сервере)
...
if (remoteVideo.canPlayType('application/vnd.apple.mpegurl') && Browser.isSafariWebRTC()) {
console.log("Using Native HLS player");
if (autoplay) {
// There should not be any visible item on the page unless player
hideAllToAutoplay();
// The player should use all available page width
setUpPlayerItem(true);
// The player should be muted to automatically start playback
initVideoPlayer(remoteVideo, true);
playBtnClick();
} else {
setText("header", "HLS Native Player Minimal");
displayCommonItems();
setUpButtons();
enablePlaybackStats();
// The player should have a maximum fixed size
setUpPlayerItem(false);
// The player can be unmuted because user should click Play button
initVideoPlayer(remoteVideo, false);
}
} else {
setText("notifyFlash", "Your browser doesn't support native HLS playback");
disableItem("applyBtn");
toggleInputs(false);
}
} |
3. Инициализация видео элемента для проигрывания
Code Block | ||||
---|---|---|---|---|
| ||||
const initVideoPlayer = function(video, playBtnClick(muted) { if (validateForm()video) { video.style.backgroundColor var streamName = $('#playStream').val(); = "black"; video.muted = muted; if (Browser.isiOS()) { // iOS hack when using standard controls to leave fullscreen mode streamName = encodeURIComponentsetWebkitFullscreenHandlers(streamNamevideo); ...} } } |
4. Формирование URL HLS-потока
Если указаны ключ и токен авторизации, они будут включены в URL потока
Code Block | ||||
---|---|---|---|---|
| ||||
function playBtnClick(const getVideoSrc = function(src) { let videoSrc = src; if (validateForm()) { ... let streamName = getValue('playStream'); streamName = encodeURIComponent(streamName); var videoSrc = $getValue("#urlServerurlServer").val() + '/' + streamName + '/' + streamName + '.m3u8'; varlet key = $getValue('#keykey').val(); varlet token = $getValue("#tokentoken").val(); if (key.length > 0 && token.length > 0) { videoSrc += "?" + key + "=" + token; } } ...setValue("fullLink", videoSrc); }return videoSrc; } |
5. Запуск плеера
Если браузер не поддерживает воспроизведение HLS, плеер не запустится, будет выведено предупреждение
Code Block | ||||
---|---|---|---|---|
| ||||
functionconst playBtnClick = function() { iflet videoSrc = getVideoSrc(validateFormgetValue("fullLink")); if (videoSrc) { remoteVideo.onloadedmetadata = () => { console.log("Play native HLS"); remoteVideo.play(); if onStarted(remoteVideo.canPlayType('application/vnd.apple.mpegurl'))); }; remoteVideo.onplaying = () => { remoteVideo.src = videoSrcconsole.log("playing event fired"); displayPermalink(videoSrc); }; remoteVideo.addEventListener('loadedmetadata',.src = videoSrc; } } |
6. Остановка воспроизведения
Code Block | ||||
---|---|---|---|---|
| ||||
const stopBtnClick = function() { if (remoteVideo != null) { console.log("PlayStop nativeHTML5 HLS"player"); remoteVideo.pause(); remoteVideo.currentTime = 0; remoteVideo.play(); remoteVideo.removeAttribute('src'); remoteVideo.load(); } onStopped(); } |
7. Получение доступной статистики воспроизведения из HTML5 video элемента
HTML5Stats code
Code Block | ||||
---|---|---|---|---|
| ||||
const PlaybackStats = function(interval) { const playbackStats = { interval: interval || STATS_INTERVAL, timer: null, stats: null, start: function() { onStarted let video = remoteVideo; playbackStats.stop(); }stats = HTML5Stats(video); } playbackStats.timer = setInterval(playbackStats.displayStats, playbackStats.interval); else {setText("videoWidth", "N/A"); $setText("#notifyFlash").text("Your browser doesn't support native HLS playback"videoHeight", "N/A"); setText("videoRate", "N/A"); setText("videoFps", "N/A"); } showItem("stats"); } } |
6. Остановка воспроизведения
Code Block | ||||
---|---|---|---|---|
| ||||
function stopBtnClick() { if (remoteVideo != null) { , stop: function() { if (playbackStats.timer) { clearInterval(playbackStats.timer); playbackStats.timer = null; } playbackStats.stats = null; hideItem("stats"); }, displayStats: function() { if console(stats.log("Stop HTML5 player"); collect()) { let width = stats.getWidth(); let height remoteVideo= stats.pausegetHeight(); remoteVideo.currentTime = 0 let bitrate = stats.getBitrate(); let fps = stats.getFps(); setText("videoWidth", width); remoteVideo.removeAttribute('src'); setText("videoHeight", height); if (bitrate !== undefined) { remoteVideo.load(setText("videoRate", Math.round(bitrate)); } if (fps !== undefined) { onStopped() setText("videoFps", fps.toFixed(1)); } } } }; return playbackStats; } |