vue3使用flv.js播放flv直播流的代码示例

pnpm i flv.js

<video ref="videoElementRef" controls autoplay muted
                  style="width: 400px; height: 300px; object-fit: fill"></video>

import { computed, ref, nextTick, watch } from 'vue';
const formValue = ref(newState(null));
const flvPlayer = ref<flvjs.Player | null>(null);
const videoElementRef = ref<HTMLVideoElement | null>(null);  // 明确类型
const createVideo = async () => {
  if (flvjs.isSupported()) {
    if (!videoElementRef.value) {
      console.warn('videoElementRef.value is null, retrying...');
      return; // 如果 video 元素还未准备好，则直接返回
    }
    console.log('videoElement', videoElementRef.value);
    flvPlayer.value = flvjs.createPlayer({
      type: 'flv', // 只支持flv和mp4
      url: 'http://live.xxx.com/xxx/2.flv', //你的url地址
      isLive: true,
      hasAudio: true,
    });
    console.log('flvPlayer.value', flvPlayer.value);
    flvPlayer.value.attachMediaElement(videoElementRef.value);
    flvPlayer.value.load();
    flvPlayer.value.play();
    //处理视频播放错误的语法
    flvPlayer.value.on('error', () => {
      message.error(`视频加载失败，请稍候重试！`);
      return false;
    });
  }
};
// 监听 formValue 的变化，当数据加载完成后初始化视频
watch(
  () => formValue.value,
  (newFormValue) => {
    if (newFormValue && showModal.value) {
      nextTick(() => {
        createVideo();
      });
    }
  },
  { deep: true, immediate: false } // 深度监听，并且初始不执行
);
​

  if (flvPlayer.value) {
    flvPlayer.value.pause();
    flvPlayer.value.unload();
    flvPlayer.value.detachMediaElement();
    flvPlayer.value.destroy();
    flvPlayer.value = null;
  }