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

更新時間：2025年05月12日 08:30:44 作者：一方_self

這篇文章主要介紹了vue3使用flv.js播放flv直播流的相關(guān)資料,詳細(xì)描述了安裝flv.js和編寫HTML、JavaScript代碼的過程,包括在頁面關(guān)閉時銷毀播放器的操作,需要的朋友可以參考下

效果：我用ffmpeg模擬推流：

如何用ffmpeg模擬推流請看我上一篇文章

網(wǎng)頁：

如上是可以正確再網(wǎng)頁端拉流，這個功能費了一天的時間，在這里免費分享出來。

首先安裝flv.js（用npm的話我遇到過報錯）：

pnpm i flv.js

頁面核心代碼：

html：

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

js：

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 元素還未準(zhǔn)備好，則直接返回
    }
    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;
    });
  }
};
// 監(jiān)聽 formValue 的變化，當(dāng)數(shù)據(jù)加載完成后初始化視頻
watch(
  () => formValue.value,
  (newFormValue) => {
    if (newFormValue && showModal.value) {
      nextTick(() => {
        createVideo();
      });
    }
  },
  { deep: true, immediate: false } // 深度監(jiān)聽，并且初始不執(zhí)行
);
?

頁面關(guān)閉時銷毀flvPlayer：

//銷毀播放器

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