欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2025年05月12日 08:30:44   作者:一方_self  
這篇文章主要介紹了vue3使用flv.js播放flv直播流的相關資料,詳細描述了安裝flv.js和編寫HTML、JavaScript代碼的過程,包括在頁面關閉時銷毀播放器的操作,需要的朋友可以參考下

目前有個需求是:管理直播機有一個列表需要查看每個直播機的實時內容,所以需要在后臺加這個功能。

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

頁面關閉時銷毀flvPlayer:

//銷毀播放器

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

總結 

到此這篇關于vue3使用flv.js播放flv直播流的文章就介紹到這了,更多相關vue3 flv.js播放flv直播流內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論