Page History

...

Code Block

theme	RDark

https://test1.flashphoner.com:8444/client2/examples/demo/streaming/hls-js-player/hls-js-player.html?llhls=false&src=https%3A%2F%2Ftest1.flashphoner.com%3A8445%2Ftest%2Ftestcom%3A8445%2Ftest-HLS-ABR-STREAM%2Ftest-HLS-ABR-STREAM.m3u8

Пример вызова плеера с автозапуском

Code Block

theme	RDark

https://test1.flashphoner.com:8444/client2/examples/demo/streaming/hls-js-player/hls-js-player.html?llhls=false&src=https%3A%2F%2Ftest1.flashphoner.com%3A8445%2Ftest%2Ftestcom%3A8445%2Ftest-HLS-ABR-STREAM%2Ftest-HLS-ABR-STREAM.m3u8&autoplay=true

При этом воспроизведение потока будет запущено автоматически, с отключенным звуком. Для включения звука зритель должен использовать кнопку регулятора громкости в интерфейсе плеера.

...

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

1. Загрузка страницы плеера

code

Code Block

language	js
theme	RDark

const loadPlayerPage = function() {
    loadPage("../hls-player/player-page.html", "playerPage", initPage );
}

2. Инициализация HTML-страницы плеера

code

Если браузер не поддерживает технологию MSE, плеер не будет инициализирован, и будет выведено предупреждение

...

3. Инициализация видео элемента для проигрывания

code

Code Block

language	js
theme	RDark

const initVideoPlayer = function(video, muted) {
    if (video) {
        video.style.backgroundColor = "black";
        video.muted = muted;
    }
}

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

code

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

...

5. Настройка HLS.js плеера

code

Code Block

language	js
theme	RDark

const getHlsConfig = function(llHlsEnabled) {
    let config = {
        lowLatencyMode: false,
        enableWorker: true,
        backBufferLength: 90,
        manifestLoadingTimeOut: 15000
    };
    console.log("Low Latency HLS: "+llHlsEnabled)
    if(llHlsEnabled) {
        // Here we configure HLS.JS for lower latency
        config = {
           lowLatencyMode: llHlsEnabled,
           enableWorker: true,
           backBufferLength: 90,
           liveBackBufferLength: 0,
           liveSyncDuration: 0.5,
           liveMaxLatencyDuration: 5,
           liveDurationInfinity: true,
           highBufferWatchdogPeriod: 1,
           manifestLoadingTimeOut: 15000
        };
    }
    return config;
}

6. Запуск плеера

Hls.on(), Hls.loadSource(), Hls.attachMedia(), HTMLVideoElement.onplaying() code

Code Block

language	js
theme	RDark

const playBtnClick = function() {
    let videoSrc = getVideoSrc(getValue("fullLink"));
    if (videoSrc) {
        llHlsEnabled = getCheckbox("llHlsEnabled");
        hlsPlayer = new Hls(getHlsConfig(llHlsEnabled));
        hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function() {
            console.log("Play with HLS.js");
            remoteVideo.play();
        });
     initQualityLevels(hlsPlayer);
        });
        remoteVideo.onplaying = () => {
            console.log("playing event fired");
            displayPermalink(videoSrc);
            displayQualitySwitch();
        }
        hlsPlayer.loadSource(videoSrc);
        hlsPlayer.attachMedia(remoteVideo);
        onStarted();            
    }
}

7. Остановка воспроизведенияПолучение списка качеств

Hls.levels code

Code Block

language	js
theme	RDark

const stopBtnClickinitQualityLevels = function(player) {
    if (hlsPlayer != nullplayer) {
        console.log("Stop HLS segments loadinglet qualityDiv = document.getElementById("qualityBtns");
        let hlsPlayer.stopLoad()qualityLevel;
        for (let hlsPlayeri = null0;
 i <  }player.levels.length; i++) {
    if (remoteVideo != null) {
    qualityLevel =   console.log("Stop HTML5 player");
        remoteVideo.pause();
QualityLevel(player, player.levels[i].height, i, qualityDiv);
            qualityLevels.push(qualityLevel);
        }
        if (qualityLevels.length) {
            qualityLevel = QualityLevel(player, QUALITY_AUTO, -1, qualityDiv);
            qualityLevels.push(qualityLevel);
        }
    }
}

8. Действия по нажатию кнопки качества

Hls.currentLevel code

Code Block

language	js
theme	RDark

const qualityBtnClick = function(button, player, index) {
    if (player) {
        player.currentLevel = index;
    }
    button.style.color = QUALITY_COLORS.SELECTED;
    qualityLevels.forEach(item => {
        if (item.button.id !== button.id) {
            item.button.style.color = QUALITY_COLORS.AVAILABLE
        }
    });
}

9. Остановка воспроизведения

code

Code Block

language	js
theme	RDark

const stopBtnClick = function() {
    if (hlsPlayer != null) {
        console.log("Stop HLS segments loading");
        hlsPlayer.stopLoad();
        hlsPlayer = null;
    }
    if (remoteVideo != null) {
        console.log("Stop HTML5 player");
        remoteVideo.pause();
        remoteVideo.currentTime = 0;
        remoteVideo.removeAttribute('src');
        remoteVideo.load();
    }
    onStopped();
}

10. Очистка списка качеств при остановке плеера

code

Code Block

language	js
theme	RDark

const disposeQualityLevels = function() {
    qualityLevels.forEach(level => {
        if remoteVideo.currentTime = 0;
(level.button) {
            remoteVideolevel.button.removeAttributeremove('src');
        remoteVideo.load();}
    });
    qualityLevels = onStopped()[];
}

811. Получение доступной статистики воспроизведения из HTML5 video элемента

HTML5Stats code

Code Block

language	js
theme	RDark

const PlaybackStats = function(interval) {
    const playbackStats = {
        interval: interval || STATS_INTERVAL,
        timer: null,
        stats: null,
        start: function() {
            let video = remoteVideo;

            playbackStats.stop();
            stats = HTML5Stats(video);
            playbackStats.timer = setInterval(playbackStats.displayStats, playbackStats.interval);
            setText("videoWidth", "N/A");
            setText("videoHeight", "N/A");
            setText("videoRate", "N/A");
            setText("videoFps", "N/A");
            showItem("stats");
        },
        stop: function() {
            if (playbackStats.timer) {
                clearInterval(playbackStats.timer);
                playbackStats.timer = null;
            }
            playbackStats.stats = null;
            hideItem("stats");
        },
        displayStats: function() {
            if (stats.collect()) {
                let width = stats.getWidth();
                let height = stats.getHeight();
                let bitrate = stats.getBitrate();
                let fps = stats.getFps();

                setText("videoWidth", width);
                setText("videoHeight", height);

                if (bitrate !== undefined) {
                    setText("videoRate", Math.round(bitrate));
                }
                if (fps !== undefined) {
                    setText("videoFps", fps.toFixed(1));
                }
            }
        }
    };
    return playbackStats;
}

Space shortcuts

Page tree

Versions Compared

Old Version 6

New Version Current

Key