video.js适用m3u8文件格式直播间的完成示例

日期：2021-01-19 类型：科技新闻我要分享

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

为何要应用video.js？

1. PC端访问器其实不适用video立即播发m3u8文件格式的视頻

2. 手机上端各种各样的访问器订制的video页面设计风格不统1，立即写原生态的js操纵视頻适配性较差

3. video.js处理以上两个难题，还能够有各种各样视頻情况插口曝露，提升体验

关键编码：

<!DOCTYPE html>
<html>
<head>
    <title>videojs适用hls直播间案例</title>
    <link href="./video.css?v=bcd2ce1385" rel="stylesheet">
</head>
<body>

    <video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
        <source src="/chat/playlist.m3u8"  type="application/x-mpegURL">
    </video>

    <script src="./video.js?v=fc5104a2ab23"></script>
    <script src="./videojs-contrib-hls.js?v=c726b94b9923"></script>
    
    <script type="text/javascript">
        var myPlayer = videojs('roomVideo',{
            bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: true,
            errorDisplay : false,
            controlBar : false
        },function(){
            console.log(this)
            this.on('loadedmetadata',function(){
                console.log('loadedmetadata');
                //载入到元数据信息后刚开始播发视頻
                startVideo();
            })

            this.on('ended',function(){
                console.log('ended')
            })
            this.on('firstplay',function(){
                console.log('firstplay')
            })
            this.on('loadstart',function(){
            //刚开始载入
                console.log('loadstart')
            })
            this.on('loadeddata',function(){
                console.log('loadeddata')
            })
            this.on('seeking',function(){
            //正在去拿视頻流的路上
                console.log('seeking')
            })
            this.on('seeked',function(){
            //早已拿到视頻流,能够播发
                console.log('seeked')
            })
            this.on('waiting',function(){
                console.log('waiting')
            })
            this.on('pause',function(){
                console.log('pause')
            })
            this.on('play',function(){
                console.log('play')
            })

        });

        var isVideoBreak;
        function startVideo() {

            myPlayer.play();

            //手机微信内全屏适用
            document.getElementById('roomVideo').style.width = window.screen.width + "px";
            document.getElementById('roomVideo').style.height = window.screen.height + "px";


            //分辨刚开始播发视頻，移除高斯模糊不清等候层
            var isVideoPlaying = setInterval(function(){
                var currentTime = myPlayer.currentTime();
                if(currentTime > 0){
                    $('.vjs-poster').remove();
                    clearInterval(isVideoPlaying);
                }
            },200)

            //分辨视頻是不是卡住，卡主3s再次load视頻
            var lastTime = ⑴,
                tryTimes = 0;
            
            clearInterval(isVideoBreak);
            isVideoBreak = setInterval(function(){
                var currentTime = myPlayer.currentTime();
                console.log('currentTime'+currentTime+'lastTime'+lastTime);

                if(currentTime == lastTime){
                    //此时视頻已卡主3s
                    //设定当今播发時间为请求超时時间，此时videojs会在play()后把currentTime设定为0
                    myPlayer.currentTime(currentTime+10000);
                    myPlayer.play();

                    //尝试5次播发后，如仍未播发取得成功提醒更新
                    if(++tryTimes > 5){
                        alert('您的网速有点慢，更新下试试');
                        tryTimes = 0;
                    }
                }else{
                    lastTime = currentTime;
                    tryTimes = 0;
                }
            },3000)

        }
    </script>

</body>
</html>

源代码请移步github：

videojs适用hls直播间案例

附：

1.　　视頻情况剖析：

EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

currentTime()能够用来发輔助分辨视頻播发状况

2.　　视頻载入提升：

根据不原始化video无用组件的方法，提升video载入速率

var myPlayer = videojs('roomVideo',{
            bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: true,
            errorDisplay : false,
            controlBar : false
        },function(){});

未简化以前：

简化后：

3.　　你将会也会遇到的不正确error

不正确1：

{code: 4, message: "No compatible source was found for this media."}

处理：去掉video标识的data-setup="{}"，只保存js的原始配备

不正确2：

video.js Uncaught TypeError: Cannot read property 'one' of undefined

处理：

正确

var myPlayer = videojs('roomVideo',{
        bigPlayButton : false,
        textTrackDisplay : false,
        posterImage: false,
        errorDisplay : false,
        controlBar : {
            captionsButton : false,
            chaptersButton: false,
            subtitlesButton:false,
            liveDisplay:false,
            playbackRateMenuButton:false
        }
    },function(){
        console.log(this)
    });

不正确

var myPlayer = videojs('roomVideo',{
        children : {
            bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: false,
            errorDisplay : false,
            controlBar : {
                captionsButton : false,
                chaptersButton: false,
                subtitlesButton:false,
                liveDisplay:false,
                playbackRateMenuButton:false
            }
        }
    },function(){
        console.log(this)
    });

到此这篇有关video.js适用m3u8文件格式直播间的完成示例的文章内容就详细介绍到这了,更多有关video.js适用m3u8內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：手机微信混合开发小程序流程开发设计真的能替返回下一篇：没有了