vue中播放flv格式视频（b站flv.js的使用）

Posted 2023-04-30

参考技术A flv.js 就是由 bilibili 网站开源的 html5 Flash 视频（FLV）播放器，纯原生 javascript 开发（ECMAScript 6 编写） ，没有用到 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器，实现了 FLV 格式视频的播放。

具有H.264 + AAC / MP3编解码器播放功能的FLV容器
多段分段视频播放
HTTP FLV低延迟实时流播放
通过WebSocket进行FLV实时流播放
与Chrome，FireFox，Safari 10，IE11和Edge兼容
极低的开销，浏览器可以加速硬件！

1、准备一个flv格式的视频
我的文件，关于分片上传可参考 vue中使用Plupload分片上传

在vue中使用flv.js播放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
  
  
></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;
  }
}