vue3如何播放可切换flv视频

要在Vue 3中实现可切换的FLV视频播放，你可以使用`vue-flv-player`插件。下面是使用该插件的示例代码：

1. 首先，安装`vue-flv-player`插件：

npm install vue-flv-player

2. 在Vue组件中引入并注册`vue-flv-player`组件：

import VueFlvPlayer from 'vue-flv-player';

export default {
  components: {
    VueFlvPlayer,
  },
  data() {
    return {
      videoUrl: 'your_flv_video_url1.flv', // 初始化视频URL
      isPlaying: false, // 控制视频播放状态
    };
  },
  methods: {
    switchVideo() {
      this.isPlaying = false; // 停止当前视频播放
      this.videoUrl = 'your_flv_video_url2.flv'; // 切换为新的视频URL
      this.$nextTick(() => {
        this.isPlaying = true; // 开始播放新视频
      });
    },
  },
};

3. 在Vue模板中使用`vue-flv-player`组件来展示视频：

<template>
  <div>
    <vue-flv-player :video-url="videoUrl" :autoplay="isPlaying" controls></vue-flv-player>
    <button @click="switchVideo">切换视频</button>
  </div>
</template>

确保替换代码中的`your_flv_video_url1.flv`和`your_flv_video_url2.flv`为你实际的FLV视频URL。

这样，当组件加载时，初始化的视频将会自动播放。点击"切换视频"按钮时，会停止当前视频播放并切换为新的视频URL，并开始播放新视频。

请确保在浏览器中安装了FLV视频播放器插件或进行了适当的配置，以便播放FLV视频。