vue3 同时播放视频

在 Vue3 中同时播放多个视频，可以利用 Vue 的组件化特性结合 HTML5 的 `<video>` 元素来实现。以下是一个基本的步骤：

1. **创建视频组件**:
创建一个自定义的视频组件，比如 `VideoPlayer.vue`，在这个组件里封装 `<video>` 元素，并设置必要的事件处理。

<template>
  <div class="video-player">
    <video ref="video" :src="videoSrc" @loadeddata="onVideoLoaded" @error="onError"></video>
  </div>
</template>

<script>
export default {
  props: ['videoSrc'],
  mounted() {
    this.$refs.video.play();
  },
  methods: {
    onVideoLoaded() {
      // 视频加载完成后的操作
    },
    onError(error) {
      console.error('视频播放错误:', error);
    }
  }
};
</script>

2. **在父组件中使用组件**:
在需要同时播放视频的父组件中，你可以实例化这个组件并传递不同的视频源给它。

<template>
  <div>
    <video-player video-src="video1.mp4"></video-player>
    <video-player video-src="video2.mp4"></video-player>
  </div>
</template>

<script>
import VideoPlayer from './VideoPlayer.vue';

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

注意，Vue并不直接控制视频的播放状态，而是通过监听事件（如`@loadeddata`和`@error`）来间接管理。每个视频的播放、暂停、停止等操作都应该由组件内部自行处理。