欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

video.js支持m3u8格式直播的实现示例

程序员文章站 2022-04-03 18:34:40
这篇文章主要介绍了video.js支持m3u8格式直播的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-05-20...

为什么要使用video.js?

1. pc端浏览器并不支持video直接播放m3u8格式的视频

2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的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 = -1,
                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:

附:

一.  视频状态分析:

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

currenttime()可以用来发辅助判断视频播放情况

video.js支持m3u8格式直播的实现示例

二.  视频加载优化:

通过不初始化video无用组件的方式,提高video加载速度

var myplayer = videojs('roomvideo',{
            bigplaybutton : false,
            texttrackdisplay : false,
            posterimage: true,
            errordisplay : false,
            controlbar : false
        },function(){});

未简化之前:

video.js支持m3u8格式直播的实现示例

简化后:

video.js支持m3u8格式直播的实现示例

三.  你可能也会遇到的错误error

错误1:

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

video.js支持m3u8格式直播的实现示例

解决:去掉video标签的data-setup="{}", 只保留js的初始配置

错误2:

video.js uncaught typeerror: cannot read property 'one' of undefined

video.js支持m3u8格式直播的实现示例

解决:

正确

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内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

相关标签: M3U8 video.js