乐趣区

关于flv:在vue中使用flvjs播放flv直播

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
  width="100%"
  height="100%"
></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;
  }
}
退出移动版