如何在 Vue.js/Nuxt.js 中播放单个视频时暂停所有其他视频？答案

【问题标题】：How to pause all other videos while playing a single video in Vue.js/Nuxt.js?如何在 Vue.js/Nuxt.js 中播放单个视频时暂停所有其他视频？
【发布时间】：2020-11-19 13:00:54
【问题描述】：

我有一个在 nuxt.js 应用程序上开发的提要组件，其中将显示多个用户的活动（发布视频、喜欢、评论）。我们可以假设像 facebook 的新闻提要一样，我们有一系列视频。用户可以点击并播放其中的任何一个。

feed.vue

<div v-for="(item, vidIndex) in videos":key="vidIndex">
    <div>
        <video :src="item.url" type="video/mp4"></video>
    </div>
</div>

问题是，用户可以点击多个视频进行播放，所有视频都在播放，造成混乱。现在我想要的是，如果任何用户单击要播放的视频，则应该暂停之前播放的所有其他视频。有什么想法我该怎么做？

【问题讨论】：

使用引用获取<video> DOM元素并停止？
您能详细说明一下吗？有一些伪代码？

标签： javascript vue.js video nuxt.js

【解决方案1】：

这是一个可行的解决方案（更新视频 URL 后）：

<template>
  <div>
    <div v-for="video in videos" :key="video.ref">
      <video :ref="video.ref" :src="video.url" type="video/mp4" @click="onClick(video)"></video>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    videos() {
      return [
        { url: 'https://path/to/your/video.mp4', ref: 'video0' },
        { url: 'https://path/to/your/video.mp4', ref: 'video1' },
        { url: 'https://path/to/your/video.mp4', ref: 'video2' },
      ];
    },
  },
  methods: {
    onClick({ ref }) {
      // Loop over all videos
      this.videos.forEach((video) => {
        // Get the DOM element for this video
        const $video = this.$refs[video.ref][0];
        // Play the video that the user clicked
        if (video.ref === ref) $video.play();
        // Pause all other videos
        else $video.pause();
      });
    },
  },
};
</script>

请注意，这里我将videos 定义为计算属性。在您的情况下，它可能是一个道具。此示例为每个视频分配一个ref 字符串，以便以后可以在onClick 处理程序中直接操作视频。

【讨论】：