Vue 3 中怎么实现对多个 <video> 标签实现批量暂停？

在 Vue 3 中，如果你想对多个 <video> 标签实现批量暂停，可以使用 ref 来引用所有视频元素，并通过简单的 JavaScript 逻辑来遍历它们进行暂停。下面是一个示例，展示如何批量暂停视频。

示例：批量暂停视频

这个示例中，我们将创建一个包含多个视频的组件，并实现一个按钮，点击该按钮时将暂停所有视频。

1. 创建 VideoList 组件

<template>
  <div>
    <h1>视频列表</h1>
    
    <div class="video-container">
      <video
        v-for="(video, index) in videos"
        :key="index"
        ref="videoRefs"
        :src="video.src"
        controls
        style="margin: 10px;"
      ></video>
    </div>
    
    <button @click="pauseAllVideos">暂停所有视频</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'VideoList',
  setup() {
    const videos = [
      { src: 'https://link_to_video1.mp4' },
      { src: 'https://link_to_video2.mp4' },
      { src: 'https://link_to_video3.mp4' },
    ];

    const videoRefs = ref([]);

    const pauseAllVideos = () => {
      videoRefs.value.forEach((video) => {
        if (video) {
          video.pause(); // 调用暂停方法
        }
      });
    };

    return {
      videos,
      videoRefs,
      pauseAllVideos,
    };
  },
};
</script>

<style scoped>
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

2. 使用 VideoList 组件

在主组件或 App.vue 中使用这个 VideoList 组件：

<template>
  <div>
    <video-list />
  </div>
</template>

<script>
import VideoList from './VideoList.vue'; // 确保路径正确

export default {
  components: {
    VideoList,
  },
};
</script>

详细说明

• 视频元素引用: 使用 ref 引用视频元素数组。在 video 标签上，ref="videoRefs" 将所有视频元素都收集到 videoRefs 中。
• 暂停方法: pauseAllVideos 方法遍历 videoRefs 并调用每个视频元素的 pause() 方法，从而实现批量暂停。

注意事项

• 确保视频的 URL 是有效的并且可以正常播放。
• 组件的样式可以调整以方便布局，以上示例只是简单的的样式。
• 在某些浏览器中，如果视频是通过 JavaScript 加载的，自动播放可能会受到限制。

标签：
来源：