Have video Quality Controls in hls.js / Video.js for Live Streaming

问题

Using 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');
                });
            }
        });
    })();

In this Stream i can get the levels or the qualities i have for the Video but the controls dosen't show up in the video player. how can we get that .

Using Video .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>

Same problem occurs for Video Js too . I cannot get to see the controls , what am i missing .

Things i have looked into . https://www.npmjs.com/package/videojs-hls-quality-selector Every-time i add this i get hlsQualitySelector not a function . And for hls.js i got //https://github.com/video-dev/hls.js/blob/master/docs/API.md#quality-switch-control-api which explains it but do i need to have my own UI for this.

I am using Plain vanilla JS and HTML for this project.

回答1:

There is a plugin available for video.js which does exactly what I think you want.

If you look at the screen here you can see the user can switch between SH and HD for example:

You can see full details here: https://github.com/kmoskwiak/videojs-resolution-switcher

Note that it states it is for Video.js version 5 which is an older version now so you may have to check and modify for the current video.js version.

回答2:

have a look at this: https://github.com/sahilkashyap64/hls I found 2 ways to do it. index.html Credits to 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

there's a index3.html as well here's demo link: https://sahilkashyap64.github.io/hls/index3.html

来源：https://stackoverflow.com/questions/60296612/have-video-quality-controls-in-hls-js-video-js-for-live-streaming