VUE 播放直播监控 FLV 视频流，参考代码可直接复制运行。

VUE3 + TypeScript

一、先引入 flv.js 

 

npm install  flv.js
yarn add  flv.js

二、参考代码

<template>
    <video id="videoFlv" style="width: 500px;height: 500px;" controls></video>
  </template>
  <script lang="ts" setup>
  import { onBeforeUnmount, onMounted, ref, watch } from "vue";
  import flvjs from "flv.js";
  
  // 视频流
  const url='';  // 请输入你真实的Flv视频流
  
  // 监控视频实例
  const flvPlayerRef: any = ref();
  
  // 初始化
  onMounted(() => {
       // 检查当前浏览器是否支持 FLV
          if (flvjs.isSupported()) {
            const videoElement: any = window.document.getElementById("videoFlv");
             // 创建监控实例
             const flvPlayer = flvjs.createPlayer(
              {
                type: "flv",
                url: url,
                isLive: false, // 是否自动开启直播
              },
              {
                autoCleanupSourceBuffer: true, // 播放器会自动管理和清理缓冲区，减少内存使用。
                autoCleanupMaxBackwardDuration: 12, //控制最大回退缓冲时间，避免过多的数据占用内存。
                autoCleanupMinBackwardDuration: 8, //确保播放中至少保留一定的缓冲时间，以防播放中断。
              }
            );
            // 将监控实例绑定在播放器中显示视频内容
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
  
            // flvPlayer.play(); // 播放视频方法
  
            // 监听播放状态等事件
            flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
              console.log("视频加载完成");
            });
  
            flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
              console.error("视频播放错误", errType, errDetail);
              destroyFlv()

            });
  
            flvPlayer.on(flvjs.Events.STATISTICS_INFO, (_statistics) => {
              // console.log("视频播放统计信息", statistics);
            });
            
            flvPlayerRef.value = flvPlayer;
          }
   
  });
  
  // 销毁视频组件  如何有切换视频流重新播放的需求，请在每一次切换时，调用这个方法来清空。
  const  destroyFlv=()=>{
    if (flvPlayerRef.value) {
      flvPlayerRef.value.pause(); // 确保在销毁前暂停播放
      flvPlayerRef.value.unload(); // 卸载播放器
      flvPlayerRef.value.detachMediaElement(); // 移除视频元素的关联
      flvPlayerRef.value.destroy(); // 销毁播放器实例
      flvPlayerRef.value = null; // 清空引用
    }
  }
  
  // 组件关闭时执行方法
  onBeforeUnmount(() => {
    destroyFlv()
  });
  </script>