[JavaScript知识库]vue使用videojs播放mu38

引入videojs

// 安装依赖
npm install vue-video-player --save
npm install videojs-contrib-hls --save

import videojs from "video.js";
import "videojs-contrib-hls";

    //播放视频
    getVideo(url, index) {
      var video = document.getElementById(`video${index}`);
      var that=this;
       videojs(
        video,
        {
          bigPlayButton: true,
          textTrackDisplay: false,
          posterImage: false,
          errorDisplay: false,
          controls: true,
          autoplay: true,
          hls: {
            withCredentials: true,
          },
          fullscreen: {
            options: { navigationUI: "hide" },
          },
          sources: [
            {
              src: url,
            },
          ],
        },
        function () {
          this.play();
  var seekingTimes = 0;
    //直播卡顿加载loading时候触发seeking
    this.on('seeking',function(){
        //正在去拿视频流的路上
        console.log('seeking', ++seekingTimes)
        if(seekingTimes >= 8) {
             that.$router.go(0)
        }
    })
    //直播拿到视频流重新播放时出发seeked
    this.on('seeked',function(){
        seekingTimes = 0
        //已经拿到视频流,可以播放
        console.log('seeked')
    })   


          this.on("error", function () {
            console.log("加载错误");
            that.$router.go(0)
        
          });
    this.on("stalled",function(){
        console.log("网速异常");
             setTimeout(() => { 
              that.$router.go(0)
             }, 10000);
    })
           



        }
      );

    },

事件监听参考

var playerVideo = videojs("my-player", options, function onPlayerReady() {
    videojs.log('Your player is ready!');
    
    this.on("loadstart",function(){
        console.log("开始请求数据 ");
    })
    this.on("progress",function(){
        console.log("正在请求数据 ");
    })
    this.on("loadedmetadata",function(){
        console.log("获取资源长度完成 ")
    })
    this.on("canplaythrough",function(){
        console.log("视频源数据加载完成")
    })
    this.on("waiting", function(){
        console.log("等待数据")
    });
    this.on("play", function(){
        console.log("视频开始播放")
    });
    this.on("playing", function(){
        console.log("视频播放中")
    });
    this.on("pause", function(){
        console.log("视频暂停播放")
    });
    this.on("ended", function(){
        console.log("视频播放结束");
    });
    this.on("error", function(){
        console.log("加载错误")
    });
    this.on("seeking",function(){
        console.log("视频跳转中");
    })
    this.on("seeked",function(){
        console.log("视频跳转结束");
    })
    this.on("ratechange", function(){
        console.log("播放速率改变")
    });
    this.on("timeupdate",function(){
        console.log("播放时长改变");
    })
    this.on("volumechange",function(){
        console.log("音量改变");
    })
    this.on("stalled",function(){
        console.log("网速异常");
    })
   
    
});