在hls.js/Video.js中进行视频质量控制以进行实时流式传输 [英] Have video Quality Controls in hls.js / Video.js for Live Streaming

问题描述

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

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

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 .

使用视频.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也发生相同的问题.我看不到控件，我想念什么.

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

我研究过的东西. https://www.npmjs.com/package/videojs-hls-quality-选择器每次我添加此代码，我都会得到hlsQualitySelector而不是一个函数.对于hls.js，我/// https://github.com/video-dev/hls.js/blob/master/docs/API.md#quality-switch-control-api 对此进行了解释，但我需要有我自己的用户界面.

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.

我正在为此项目使用Plain Vanilla JS和HTML.

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

推荐答案

对此进行了查看: https://github.com/sahilkashyap64/hls 我发现了两种方法.index.html归功于HasanAlibegić

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

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

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

这篇关于在hls.js/Video.js中进行视频质量控制以进行实时流式传输的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！