vue项目中video.js的使用总结

一、video.js在Vue项目中的安装及使用

video.js官网文档地址

1. 安装依赖包

   npm install video.js --save // 视频播放器插件
   npm install videojs-contrib-hls  --save // 播放hls流插件
   

2. 在main.js引入vido.js的样式文件

   import 'video.js/dist/video-js.css'  //videojs样式
   

3. video.js所在页面引入和使用

   import videojs from 'video.js' 
   import 'videojs-contrib-hls'
   import "@videojs/http-streaming"
   
   // 页面
   <video id="cameraMonitoringVideo" class="video-js vjs-default-skin" preload="auto">
       <source :src="vodeoUrl" type="application/x-mpegURL">
   </video>
   
   // 播放器初始化
   this.player = videojs('cameraMonitoringVideo', {
       bigPlayButton: false, 
       textTrackDisplay: false,
       posterImage: true,
       errorDisplay: false,
       controlBar: true,
       muted: true //静音模式 、、 解决首次页面加载播放。
    }, function () {
       this.play() // 自动播放
    })
   

4. video.js视频播放器销毁

    // 离开页面销毁视频播放器
    beforeDestroy() {
       if (this.player != null) {
          this.player.dispose() // dispose()会直接删除Dom元素
       }
    }
   

二、使用video.js播放视频流出现的问题以及解决方案

1. video.js播放hls时，当视频的 m3u8 文件加载成功并且浏览器无法获取其中一个 ts 文件时，video.js会不断进行重试，导致视频画面卡顿，无法正常播放视频画面。

   错误信息： 404(Not Found) VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the final playlist.

   // 监听错误事件(如果其中一个ts文件获取失败，需要进行重试次数限制，并且重新加载视频流，以保证视频能够继续播放)
   this.tech_.on('retryplaylist', () => {
      console.log("ts文件获取失败404.....");
      this.src(player.currentSrc())
      this.load()
      this.play()
   })
   

2. video.js播放hls时，出现视频延迟加载的问题。

   // 监听video播放器播放时间的变化(延迟6秒重新加载)
   this.on('timeupdate', function () {
       // 计算表最新推流的时间和现在播放器播放推流的时间
       let differTime = this.buffered().end(0) - this.currentTime();
       // 差值大于6s时进行重新加载直播流
       if (differTime >= 6){
           console.log("重新加载视频流");
           this.src(player.currentSrc())
           this.load()
           this.play()
       }
   })
   

3. video.js播放hls时，初始化播放正常，过一段时间出现视频卡顿，导致页面所有的视频一直加载，无法恢复正常播放。

   // 监听video播放器卡顿加载loading时候触发seeking
   // 说明：(1)如果卡顿次数不到三次，seekingTimes归零，继续播放；
   //      (2)如果卡顿次数达到三次，就重新加载视频流；
   let seekingTimes = 0
   this.on("seeking",function(){
        seekingTimes ++
        console.log("直播卡顿加载loading");
        if(seekingTimes >= 3) {
            seekingTimes = 0
            this.src(player.currentSrc())
            this.load()
            this.play()
        }
    })
    //监听video播放器拿到视频流重新播放时出发seeked
      this.on('seeked',function(){
          seekingTimes = 0
          // 已经拿到视频流,可以播放
          console.log('seeked')
      })