【实战】在vue3项目中使用flv.js播放直播视频流

📒 最近在写vue3的项目，其中一个模块需要直播视频流，查了很多资料，但是有些细节网上的文章描述的不够具体，在此记录一下如何在实战中运用flvjs去播放视频流~

---

💙直接上代码

<template>
  <div class="videoBox">
    <video
      id="videoElement"
      controls
      autoplay
      muted
      style="width: 100%; height: 100%; object-fit: fill"
    ></video>
  </div>
</template>
<script setup name="videoFlv">
  import flvjs from 'flv.js';
  import { useMessage } from 'naive-ui';
  const message = useMessage();
  const props = defineProps({
    taskInfo: {
      type: Object,
      default: () => {},
    },
  });
// 首先定义flvPlayer为null
  const flvPlayer = ref(null);
  const taskInfo = computed(() => props.taskInfo);
  const createVideo = () => {
    if (flvjs.isSupported()) {
      var videoElement = document.getElementById('videoElement');
      flvPlayer.value = flvjs.createPlayer(
        {
          type: 'flv',
          url: ‘’, //你的url地址
          isLive: true,
          hasAudio: false,
        }
      );
      flvPlayer.value.attachMediaElement(videoElement);
      flvPlayer.value.load();

      setTimeout(function () {
        flvPlayer.value.play();
      }, 300);
      //处理视频播放错误的语法
      flvPlayer.value.on('error', () => {
        message.error(`视频加载失败，请稍候重试！`);
        return false;
      });
    }
  };

// 我的视频是弹窗显示的，所以创建了destroy方法，在子组件中暴露出去后，在父组件调用即可，这样关闭弹窗后，视频流会停止请求。
  const destroy = () => {
    flvPlayer.value.pause(); //暂停播放数据流
    flvPlayer.value.unload(); //取消数据流加载
    flvPlayer.value.detachMediaElement(); //将播放实例从节点中取出
    flvPlayer.value.destroy(); //销毁播放实例
    flvPlayer.value = null;
  };
  defineExpose({ destroy });
 
  onMounted(() => {
    createVideo();
  });
</script>
<style scoped>
  .videoBox {
    width: 800px;
    height: 450px;
    border: solid 1px #ccc;
  }
</style>

💓有帮助的话就点个小心心吧~