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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關文章
vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例
今天小編就為大家分享一篇vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue2與vue3中生命周期執(zhí)行順序的區(qū)別說明
這篇文章主要介紹了vue2與vue3中生命周期執(zhí)行順序的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06淺談vue的props,data,computed變化對組件更新的影響
本篇文章主要介紹了淺談vue的props,data,computed變化對組件更新的影響,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01