flv.js在vue中使用

        flv.js是一个用于在浏览器中解码和播放FLV视频的JavaScript库。它可以将FLV视频流解码并显示在HTML5的video元素中，从而实现在浏览器中直接播放FLV格式的视频文件。

安装

#  npm

npm install flv.js

#  yarn 

yarn add flv.js

#  pnpm 

pnpm install flv.js

 使用

<template>
 <div>
   <video ref="videoElement" controls></video>
 </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import flvjs from 'flv.js';
import axios from 'axios';

export default {
 setup() {
   // 获取 video 元素的引用
   const videoElement = ref(null);

   // 创建 flv.js 实例
   const flvPlayer = flvjs.createPlayer({
     type: 'flv',   // 指定视频类型为 flv
     url: '',        // 空字符串，后面在 onMounted 钩子中设置视频的 URL
     isLive: true,//数据源是否为直播流
     hasAudio: false,//数据源是否包含有音频
  hasVideo: true,//数据源是否包含有视频
  enableStashBuffer: false//是否启用缓存区
  });

   // 将 flv.js 实例关联到 video 元素
   flvPlayer.attachMediaElement(videoElement.value);

   // 加载视频
   flvPlayer.load();

   // 播放视频
   videoElement.value.play();

   // 请求视频并设置 URL
   onMounted(async () => {
     try {
       const response = await axios.get('xxx/xxvideo.flv'); // 替换成实际的视频 URL
       const videoUrl = URL.createObjectURL(new Blob([response.data]));
       flvPlayer.url = videoUrl;
    } catch (error) {
       console.error('Failed to load video:', error);
    }
  });
   // 销毁 flv.js 实例
   onBeforeUnmount(() => {
     if (flvPlayer) {
       flvPlayer.pause();//暂停播放数据流
       flvPlayer.unload();//取消数据流加载
       flvPlayer.detachMediaElement();//将播放实例从节点中取出
       flvPlayer.destroy();//销毁播放实例
       flvPlayer = null;
    }
  });
   return {
     videoElement
  };
}
};


</script>

flv.js常用方法

1：flvjs.isSupported()：判断当前浏览器是否支持播放

2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例

3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点

4：flvPlayer.load()：加载数据流

5：flvPlayer.play()：播放数据流

6：flvPlayer.pause()：暂停播放数据流

7：flvPlayer.unload()：取消数据流加载

8：flvPlayer.detachMediaElement()：将播放实例从节点中取出

9：flvPlayer.destroy()：销毁播放实例