vue3-video-play 实现直播

要在 Vue3 中实现直播功能，可以使用 `vue-video-player` 插件。这个插件是基于 `video.js` 开发的，可以很方便地实现视频播放功能，并且支持直播流播放。下面是一个简单的示例代码：

1. 安装插件

npm install vue-video-player --save

2. 在组件中使用

<template>
  <div>
    <video-player ref="player" :options="playerOptions"></video-player>
  </div>
</template>

<script>
import VideoPlayer from "vue-video-player";
import "video.js/dist/video-js.css";

export default {
  components: {
    VideoPlayer,
  },
  data() {
    return {
      playerOptions: {
        autoplay: true,
        liveui: true,
        sources: [
          {
            src: "直播流地址",
            type: "application/x-mpegURL",
          },
        ],
      },
    };
  },
  mounted() {
    this.$refs.player.play();
  },
};
</script>

在以上示例代码中，`<video-player>` 组件是 `vue-video-player` 提供的，可以通过 `options` 属性设置播放器的参数。其中 `sources` 属性设置直播流地址，`type` 属性设置直播流格式。`liveui` 属性用于显示直播相关的 UI 控件，例如进度条、时间显示等。

需要注意的是，直播流的地址需要根据实际情况进行设置。同时，由于直播流是实时传输的，所以播放器的 `autoplay` 属性应该设置为 `true`，否则需要手动调用 `play` 方法来启动播放器。

希望这个示例代码能够对你有所帮助！