vue3+nuxt 播放多个视频flv

Vue3 和 Nuxt 结合可以创建一个动态的前端应用，其中播放多个FLV视频可以通过以下步骤实现：

1. 安装依赖：首先，你需要安装Vue3和Nuxt的相关脚手架工具，如`vue-cli`或`nuxt.js`。然后安装处理视频播放的库，例如`vue-video-player`或`video.js`。

npm install vue-video-player # 或者 yarn add vue-video-player

2. 配置Vue组件：创建一个Vue组件，比如`VideoPlayer.vue`，并导入视频播放组件。在这个组件中，你可以使用`<vue-video-player>`标签，并提供多个FLV文件路径作为数据属性。

<template>
  <div>
    <vue-video-player ref="player" :src="videoUrl" />
  </div>
</template>

<script>
import VueVideoPlayer from 'vue-video-player'

export default {
  components: {
    VueVideoPlayer,
  },
  data() {
    return {
      videoUrls: ['path/to/video1.flv', 'path/to/video2.flv'], // 根据需要替换为实际的URL
    }
  },
}
</script>

3. 使用Nuxt路由：在Nuxt的`pages`目录下创建一个页面文件，如`video-list.vue`，将上述`VideoPlayer.vue`组件引入并遍历`videoUrls`数组来显示每个视频。

<template>
  <div>
    <div v-for="(url, index) in videoUrls" :key="index">
      <VideoPlayer :video-url="url" />
    </div>
  </div>
</template>

<script>
import VideoPlayer from '@/components/VideoPlayer.vue'

export default {
  components: { VideoPlayer },
}
</script>

4. 动态切换：如果需要用户能够选择播放某个视频，可以在列表中添加交互元素，比如点击事件，传递对应的URL给`video-url` prop。

5. 注意事项：确保服务器支持FLV视频流的访问，同时考虑性能优化，因为同时加载多个视频可能会消耗较多资源。