在hls.js / Video.js中对直播流进行视频质量控制

Question

使用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也存在同样的问题。我看不到控件，我错过了什么。

我调查过的事情。每次我添加这个，我都会得到hlsQualitySelector，而不是一个函数。对于hls.js，我得到了//https://github.com/video-dev/hls.js/blob/master/docs/API.md#quality-switch-control-api，它解释了这一点，但是我需要有自己的UI来实现这一点吗？

我在这个项目中使用Plain vanilla JS和HTML。

Answer 1

看看这个：https://github.com/sahilkashyap64/hls我找到了两种方法。index.html归功于哈桑·阿里贝吉ć

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

Answer 2

有一个适用于video.js的插件，它可以做我认为你想要的事情。

如果你看这里的屏幕，你可以看到用户可以在SH和HD之间切换，例如：

​

​

你可以在这里看到完整的细节：https://github.com/kmoskwiak/videojs-resolution-switcher

请注意，它声明它是针对Video.js版本5的，该版本现在是一个较旧的版本，因此您可能必须检查并修改当前的video.js版本。