VUE + flv视频的播放与切换

安装：

npm install flv.js --save

npm install videojs-flvjs-es6 --save

HTML：

<div id="p-box">
  <video id="myVideo" class="videoBox" muted autoplay type="application/x-mpegURL">
    <source ref="mflvref" id="mflv" type="video/x-flv" />
  </video>
</div>

JS：

import videojs from 'video.js'
import "videojs-flvjs-es6";
var player = null;

data() {
  return {
    currSrc: "", //播放地址
  };
},

if (player) player.dispose();
this.$nextTick(() => {
  this.currSrc = 'flv地址';
  this.getVideo();
});

  //播放视频
  getVideo() {
    let osrc = this.$refs.mflvref.src; // 原播放地址
    let mflv = document.getElementById("mflv"); // source元素
    let mvbox = document.getElementById("p-box"); // 视频父级dom
    if (osrc) {
      mvbox.innerHTML =
          "<video id='myVideo' class='videoBox' muted autoplay type='application/x-mpegURL'><source ref='mflvref' id='mflv' type='video/x-flv' /></video>";
      mflv = document.getElementById("mflv"); //重新创建视频元素后获取dom
    }
    mflv.src = this.currSrc;
    player = videojs("myVideo", {
      techOrder: ["html5", "flvjs"],
      flvjs: {
        mediaDataSource: {
          isLive: true,
          cors: true,
          withCredentials: false,
        },
      },
    });
  },