页面v-for循环展示多个video并同时播放三个视频

要同时播放多个视频，可以使用 JavaScript 和 HTML5 Video API。

首先，你需要在页面上添加多个 video 元素，然后使用 v-for 循环渲染它们。在每个 video 元素上添加一个 ref 属性，以便在 JavaScript 中引用它们。

<div v-for="video in videos" :key="video.id">
  <video ref="videoRefs[video.id]" :src="video.src" controls></video>
</div>

在 Vue 组件中，你可以使用 `mounted()` 钩子函数来获取所有 video 元素的引用，并将它们存储在一个数组中:

export default {
  data() {
    return {
      videos: [
        {
          id: 1,
          src: 'https://example.com/video1.mp4',
        },
        {
          id: 2,
          src: 'https://example.com/video2.mp4',
        },
        {
          id: 3,
          src: 'https://example.com/video3.mp4',
        },
      ],
      videoRefs: {},
    };
  },
  mounted() {
    this.videos.forEach((video) => {
      this.videoRefs[video.id] = this.$refs[`videoRefs[${video.id}]`][0];
    });
  },
};

接下来，你可以在组件中编写播放多个视频的逻辑。首先，你需要使用 `play()` 方法来播放视频。然后，你需要在每个视频上添加一个事件监听器，以便在视频播放结束时重新播放视频。

export default {
  data() {
    return {
      videos: [
        {
          id: 1,
          src: 'https://example.com/video1.mp4',
        },
        {
          id: 2,
          src: 'https://example.com/video2.mp4',
        },
        {
          id: 3,
          src: 'https://example.com/video3.mp4',
        },
      ],
      videoRefs: {},
    };
  },
  mounted() {
    this.videos.forEach((video) => {
      this.videoRefs[video.id] = this.$refs[`videoRefs[${video.id}]`][0];
      this.videoRefs[video.id].addEventListener('ended', () => {
        this.videoRefs[video.id].currentTime = 0;
        this.videoRefs[video.id].play();
      });
    });
  },
  methods: {
    playAllVideos() {
      Object.keys(this.videoRefs).forEach((key) => {
        this.videoRefs[key].play();
      });
    },
  },
};

最后，在页面上添加一个按钮，以触发播放所有视频的逻辑。

<button @click="playAllVideos">播放所有视频</button>