在vue中使用flv.js播放flv直播

Posted 2021-09-03 宸翰

1. npm安装flv.js

npm install flv.js

2. 项目引入flv.js

import flvjs from "flv.js";

3. 简单使用flv.js

//template    
<video
  id="videoElement"
  ref="videoElement"
  controls
  muted
  
  
></video>

//script
data() {
  return {
    flvPlayer: null
  }
},
methods: {
  //创建flv视频实例
  createFlv() {
    let url="http://xxxxxxxx.flv";
    if (flvjs.isSupported()) {
     let videoElement = document.getElementById("videoElement");
     this.flvPlayer = flvjs.createPlayer({
       type: "flv",
       isLive: true,
       hasAudio: false,
       url
     });
     this.flvPlayer.attachMediaElement(videoElement);
     this.flvPlayer.load();
    }
  }
}

4.销毁flv实例

//销毁flv实例
flv_destroy() {
  if (this.flvPlayer) {
    this.flvPlayer.pause();
    this.flvPlayer.unload();
    this.flvPlayer.detachMediaElement();
    this.flvPlayer.destroy();
    this.flvPlayer = null;
  }
}