用vue3 开发一个视频播放 点机可以更换视频播放

好的，这是一个比较常见的需求，下面是一个基本的实现思路：

1. 使用 Vue3 创建一个视频播放组件，并在组件中引入视频播放器库（如video.js）。
2. 在组件中定义一个数组，存储多个视频源的地址。
3. 在组件中使用 computed 属性，根据当前选中的视频源的索引值获取对应的视频源地址。
4. 在组件中使用 v-bind 绑定视频播放器的 src 属性为计算属性中获取到的视频源地址。
5. 在模板中使用 v-for 渲染出多个视频源的选项，使用 v-on:click 绑定点击事件，切换当前选中的视频源索引值。

下面是一个简单的示例代码：

<template>
  <div>
    <video ref="player" controls></video>
    <div>
      <button v-for="(source, index) in sources" :key="index" @click="changeSource(index)">
        {{ source.label }}
      </button>
    </div>
  </div>
</template>

<script>
import videojs from 'video.js';

export default {
  data() {
    return {
      sources: [
        {
          label: '视频1',
          src: 'http://example.com/video1.mp4',
        },
        {
          label: '视频2',
          src: 'http://example.com/video2.mp4',
        },
      ],
      currentSourceIndex: 0,
    };
  },
  computed: {
    currentSource() {
      return this.sources[this.currentSourceIndex].src;
    },
  },
  mounted() {
    this.player = videojs(this.$refs.player);
    this.player.src(this.currentSource);
  },
  methods: {
    changeSource(index) {
      this.currentSourceIndex = index;
      this.player.src(this.currentSource);
      this.player.play();
    },
  },
};
</script>

这个示例代码中，使用了 video.js 这个视频播放器库来实现视频的播放功能。在组件中定义了 sources 数组，存储了两个视频源的地址和标签。在 computed 属性中定义了 currentSource 计算属性，获取当前选中的视频源地址。在模板中使用 v-for 渲染出两个视频源选项，使用 v-on:click 绑定点击事件，切换当前选中的视频源索引值。在 mounted 钩子函数中初始化了视频播放器，并将 src 属性绑定到 currentSource 计算属性中获取到的视频源地址。在 changeSource 方法中，切换当前选中的视频源索引值，更新视频播放器的 src 属性，并开始播放新的视频。