当前位置:Web前端 > > 正文

videojs播放流媒体(video.js支持m3u8格式直播的实现示例)

时间:2021-10-14 00:29:11类别:Web前端

videojs播放流媒体

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()可以用来发辅助判断视频播放情况

    videojs播放流媒体(video.js支持m3u8格式直播的实现示例)

    二.  视频加载优化:

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

  • var myPlayer = videojs('roomVideo',{
                bigPlayButton : false,
                textTrackDisplay : false,
                posterImage: true,
                errorDisplay : false,
                controlBar : false
            },function(){});
    
  • 未简化之前:

    videojs播放流媒体(video.js支持m3u8格式直播的实现示例)

    简化后:

    videojs播放流媒体(video.js支持m3u8格式直播的实现示例)

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

    错误1:

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

    videojs播放流媒体(video.js支持m3u8格式直播的实现示例)

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

    错误2:

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

    videojs播放流媒体(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内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐