vue3使用flv.js播放flv直播流

合集 - 随笔(4)

1.模拟计算hash前面N个0需要的时间2024-11-192.使用yt-dlp下载youtube高清2k 60fps视频2024-11-203.使用 FFmpeg命令 通过 RTMP 协议推送本地视频02-04

4.vue3使用flv.js播放flv直播流02-05

收起

目前有个需求是：管理直播机有一个列表需要查看每个直播机的实时内容，所以需要在后台加这个功能。

效果：我用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;
}

这篇分享文章就到这里啦！如果你对文章内容有疑问或想要深入讨论，欢迎在评论区留言，我会尽力回答。同时，如果你觉得这篇文章对你有帮助，不妨点个赞并分享给其他同学，让更多人受益。

想要了解更多相关知识，可以查看我以往的文章，其中有许多精彩内容。记得关注我，获取及时更新，我们可以一起学习、讨论技术，共同进步。

感谢你的阅读与支持，期待在未来的文章中与你再次相遇！

我的微信公众号：【xdub】，欢迎大家订阅，我会同步文章到公众号上。