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

为什么要使用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：

videojs支持hls直播实例

附：

一.　　视频状态分析：

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

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

二.　　视频加载优化：

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

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

未简化之前：

简化后：

三.　　你可能也会遇到的错误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内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！