Vue3实现网页Hls Flv直播流播放_vue3 直播

序

近期楼主接到直播流相关的项目，由于没有前端工作经验，以及缺乏视频流相关的知识，一路上磕磕绊绊，现在终于能够正常实现功能。话不多说，先上组件实现

直播流组件实现

Vue3 Hls流组件实现

<template>
    <div class="playVideo-layout">
      <!-- 播放器 -->
      <div id="app-container" class="video-box">
        <video
          ref="videoElement"
          id="videoElement"
          controls
          muted
          style="width: 100%; height: 100%; object-fit: fill"
        ></video>
      </div>
    </div>
  </template>
 
 
<script>
 
import hlsjs from "hls.js";
import {ref , watch,onMounted,inject} from 'vue';
export default {
  name: "Success",
 
  props:{
      hlsUrl: String,
  },
  
  setup(props) {
    const videoUrl = ref(null);
 
    const show = (newHlsUrl) => {
      const hlsjsInstance = ref();
      const video = document.getElementById("videoElement");
      console.log(video);
      videoUrl.value = newHlsUrl;
      if (hlsjs.isSupported()) {
        if (hlsjsInstance.value) {
          hlsjsInstance.value.destroy();
          hlsjsInstance.value = null;
        }
        hlsjsInstance.value = new hlsjs();
        hlsjsInstance.value.loadSource(videoUrl.value);
        hlsjsInstance.value.attachMedia(video);
        hlsjsInstance.value.on(hlsjs.Events.MANIFEST_PARSED, () => {
          setTimeout(() => {
            video.play();
          }, 1000);
          console.log('加载成功');
        });
        hlsjsInstance.value.on(hlsjs.Events.ERROR, (event, data) => {
          console.log('加载失败');
        });
      } else {
        // 处理不支持的情况
      }
    };
 
    // 使用 watch 监听 hlsUrl 变化
    watch(() => props.hlsUrl, (newHlsUrl) => {
      show(newHlsUrl); // 在 hlsUrl 变化时执行 show
    });
 
    onMounted(() => {
      // 在组件挂载后，调用 show 方法
      show(props.hlsUrl);
    });
 
    return {
      videoUrl,
    };
  },
};
 
</script>

Vue2 Flv流组件实现(Vue3 也可用)

<template>
    <video
        id="videoElement"
        ref="videoElement"
        controls
        muted
        autoplay
        width="100%"
        height="100%"
    ></video>
</template>
 
<script>
import flvjs from 'flv.js';
import { ref, watch } from 'vue';
 
export default {
  props: {
    flvUrl: String
  },
  data() {
    return {
      flvPlayer: null
    };
  },
  mounted() {
    console.log("flvUrl is "+this.flvUrl);
    this.createFlv();
  },
  beforeDestroy() {
    this.flv_destroy();
  },
  watch: {
    flvUrl(newFlvUrl) {
      // 当 flvUrl 更新时重新创建播放器
      this.createFlv(newFlvUrl);
      console.log("new Flvurl is :"+newFlvUrl);
    }
  },
  methods: {
    createFlv(newFlvUrl) {
      if (flvjs.isSupported()) {
        let videoElement = this.$refs.videoElement;
        if (this.flvPlayer) {
          this.flv_destroy();
        }
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          hasAudio: false,
          url: newFlvUrl // 使用 newFlvUrl 作为视频链接
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
      }
    },
    flv_destroy() {
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    }
  }
}
</script>

开发中遇到的问题

1.父子组件通信相关问题

正如序言所说，楼主之前没有前端开发的工作经验，故组件通信这一块不太熟，在Flv格式中的代码，props传递，被父组件更新之后能够成功被watch观测到并执行链接更新的相关操作。

但是在Hls流的开发过程中，使用这种Vue2类型的函数写法，更新的"newHlsUrl"不能成功被观测并实时更新。故而使用Vue3的setup()函数，在setup()函数中完成对所有业务逻辑的编写。

2.DOMException

在将Hls流的业务逻辑放在setup()之前，由于楼主对Vue3的组件生命周期不了解，出现了许多错误，如：

• DOMException: The element has no supported sources.
• DOMException: failed to load because no supported source was found.
• DOMException: the play() request was interrupted by a new load request.

对于上述错误，本人在尝试逐个解决时屡屡碰壁，在将我的Hls业务代码转移到Setup()函数中不再有问题，具体原因大概与异步执行有关，因为本人的Url是通过网络异步通信实时获得的。在传递给子组件的过程中也是异步过程，所以对video().play就可能出现以上错误。
当转移至setup()之后，watch函数的成功执行，使得异步问题得以解决，能够正常播放流数据。