vue3使用流媒体播放器

Vue3 可以使用一些现成的流媒体播放器库来实现播放器功能，比如 hls.js、video.js、plyr 等。

以 hls.js 为例，你可以在 Vue3 项目中安装 hls.js 库，并在组件中引用它：

npm install hls.js --save

import Hls from 'hls.js';

export default {
  data() {
    return {
      video: null
    };
  },
  mounted() {
    this.video = this.$refs.video;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('https://example.com/stream.m3u8');
      hls.attachMedia(this.video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        this.video.play();
      });
    } else if (this.video.canPlayType('application/vnd.apple.mpegurl')) {
      this.video.src = 'https://example.com/stream.m3u8';
      this.video.addEventListener('loadedmetadata', () => {
        this.video.play();
      });
    }
  }
}

在这个例子中，我们使用了 Hls.js 库来实现 HLS 流媒体播放器。在组件的 mounted 钩子函数中，我们先获取到 video 元素的引用，并检查当前浏览器是否支持 HLS 播放。如果支持，我们通过 Hls 实例加载并解析流媒体资源，并将其附加到 video 元素上。当解析完成后，我们通过 Hls 事件监听器开始播放视频。如果不支持 HLS 播放，则直接将视频源地址赋值给 video 元素，并监听 loadedmetadata 事件开始播放视频。

当然，除了 hls.js，你也可以使用其他的流媒体播放器库来实现播放器功能。不同的库可能有不同的 API 和用法，具体可以根据实际情况选择合适的库来使用。