vue3使用flv.js播放flv直播流的代码示例
作者：一方_self
这篇文章主要介绍了vue3使用flv.js播放flv直播流的相关资料,详细描述了安装flv.js和编写HTML、JavaScript代码的过程,包括在页面关闭时销毁播放器的操作,需要的朋友可以参考下
目前有个需求是：管理直播机有一个列表需要查看每个直播机的实时内容，所以需要在后台加这个功能。
效果：我用ffmpeg模拟推流：
如何用ffmpeg模拟推流请看我上一篇文章
网页：
如上是可以正确再网页端拉流，这个功能费了一天的时间，在这里免费分享出来。
首先安装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;
});
}
};
// 监听 formValue 的变化，当数据加载完成后初始化视频
watch(
() => formValue.value,
(newFormValue) => {
if (newFormValue && showModal.value) {
nextTick(() => {
createVideo();
});
}
},
{ deep: true, immediate: false } // 深度监听，并且初始不执行
);
页面关闭时销毁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直播流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！