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

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

feed.vue

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

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

这里有一个可行的解决方案（一旦你更新了视频URL）：

导出默认值{
计算：{
视频（）{
返回[
{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'}，
];
},
},
方法：{
onClick（{ref}）{
//循环播放所有视频
this.videos.forEach（（视频）=>{
//获取此视频的DOM元素
const$video=this.$refs[video.ref][0]；
//播放用户单击的视频
如果（video.ref==ref）$video.play（）；
//暂停所有其他视频
else$video.pause（）；
});
},
},
};

---

注意，这里我将

视频

定义为一个计算属性。在你的情况下，它可能是一个道具。本例为每个视频分配一个

ref

字符串，以便以后可以在

onClick

处理程序中直接操作视频。

使用引用获取

DOM元素并停止它？您能详细说明一下吗？用一些伪代码？

<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>