在 hls.js / Video.js 中进行视频质量控制以进行实时流式传输答案

【问题标题】：Have video Quality Controls in hls.js / Video.js for Live Streaming在 hls.js / Video.js 中进行视频质量控制以进行实时流式传输
【发布时间】：2020-02-19 09:11:41
【问题描述】：

使用 HLS.js

    (() => {
        var video = document.getElementById('video');
        console.log('VIDEO',video);
        if(Hls.isSupported()) {
            var hls = new Hls();
        hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');

            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED,function() {
                //https://github.com/video-dev/hls.js/blob/master/docs/API.md#quality-switch-control-api
                //console.log('RAHUL',hls.levels);
                video.play();
            });
        }
            // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
            // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
            // This is using the built-in support of the plain video element, without using hls.js.
            // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
        // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
        else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
            video.addEventListener('loadedmetadata',function() {
                video.play();
            });
        }

        video.addEventListener('canplaythrough',  () =>  {
            var promise = video.play();
            if (promise !== undefined) {
                promise.catch(function(error) {
                    console.error('Auto-play was prevented');
                }).then(function() {
                    console.info('Auto-play started');
                });
            }
        });
    })();

在此流中，我可以获得视频的级别或质量，但控件不会显示在视频播放器中。我们怎么能得到那个。

使用视频 .js

    (() => {
        let source = document.getElementById('video-source');
        console.log('RAHUL',source);
        source.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
        source.type = 'application/x-mpegURL';
    })()

                <video
                        id="videoJS"
                        class="video-js vjs-4-3 vjs-big-play-centered"
                        controls = "true"
                        preload="auto"
                        width="640"
                        height="264"
                        poster="MY_VIDEO_POSTER.jpg"
                        data-setup="{}">
                    <source id = "video-source" src="" />
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                </video>

Video Js 也会出现同样的问题。我看不到控件，我错过了什么。

我调查过的事情。 https://www.npmjs.com/package/videojs-hls-quality-selector 每次我添加这个我得到 hlsQualitySelector not a function 。对于 hls.js，我得到了 //https://github.com/video-dev/hls.js/blob/master/docs/API.md#quality-switch-control-api，它解释了它，但我需要为此拥有自己的 UI。

我在这个项目中使用普通的 JS 和 HTML。

【问题讨论】：

标签： javascript html video http-live-streaming video.js

【解决方案1】：

看看这个：https://github.com/sahilkashyap64/hls 我找到了两种方法。 index.html 感谢 Hasan Alibegić

Lib Version
video.js    ^5.19.2
hls.min.js  ^0.9.1
vjs-quality-picker.js   ^0.0.2
videojs5-hlsjs-source-handler.min.js    ^0.3.1

index2.html

Lib Version
video.js    ^6.6.3
videojs-quality-menu.min.js ^1
videojs-hlsjs-plugin    ^stable
videojs-live-dvrux.min.js

还有一个 index3.html 这是演示链接：https://sahilkashyap64.github.io/hls/index3.html

【讨论】：

【解决方案2】：

有一个可用于 video.js 的插件，它完全符合我的想法。

如果您查看此处的屏幕，您可以看到用户可以在 SH 和 HD 之间切换，例如：

您可以在此处查看完整详细信息：https://github.com/kmoskwiak/videojs-resolution-switcher

请注意，它声明它适用于 Video.js 版本 5，它现在是旧版本，因此您可能需要检查和修改当前的 video.js 版本。

【讨论】：