vue3使用flv.js播放flv直播流的代碼示例
更新時間：2025年05月12日 08:30:44 作者：一方_self
這篇文章主要介紹了vue3使用flv.js播放flv直播流的相關資料,詳細描述了安裝flv.js和編寫HTML、JavaScript代碼的過程,包括在頁面關閉時銷毀播放器的操作,需要的朋友可以參考下
目前有個需求是：管理直播機有一個列表需要查看每個直播機的實時內(nèi)容，所以需要在后臺加這個功能。
效果：我用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直播流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Vue.js設計與實現(xiàn)無限遞歸學習總結，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
詳解利用eventemitter2實現(xiàn)Vue組件通信
這篇文章主要介紹了詳解利用eventemitter2實現(xiàn)Vue組件通信，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
uniapp使用scroll-view下拉刷新無法取消的坑及解決
這篇文章主要介紹了uniapp使用scroll-view下拉刷新無法取消的坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vue3 使用socket的完整代碼,包括vue3客戶端和服務端的實例講解,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue如何處理Axios多次請求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請求數(shù)據(jù)顯示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果，Vue 提供了內(nèi)置的過渡封裝組件transition，該組件用于包裹要實現(xiàn)過渡效果的組件2021-10-10
這篇文章主要為大家介紹了Vue之MVVM,模板語法和數(shù)據(jù)綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了在vite項目中使用@進行文件的引入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了關于Vue新搭檔TypeScript快速入門實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Vue.js中安裝一個路由器demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12