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

Question

我有一个在 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>

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

Answer 1

这是一个可行的解决方案（更新视频 URL 后）：<template>&nbsp; <div>&nbsp; &nbsp; <div v-for="video in videos" :key="video.ref">&nbsp; &nbsp; &nbsp; <video :ref="video.ref" :src="video.url" type="video/mp4" @click="onClick(video)"></video>&nbsp; &nbsp; </div>&nbsp; </div></template><script>export default {&nbsp; computed: {&nbsp; &nbsp; videos() {&nbsp; &nbsp; &nbsp; return [&nbsp; &nbsp; &nbsp; &nbsp; { url: 'https://path/to/your/video.mp4', ref: 'video0' },&nbsp; &nbsp; &nbsp; &nbsp; { url: 'https://path/to/your/video.mp4', ref: 'video1' },&nbsp; &nbsp; &nbsp; &nbsp; { url: 'https://path/to/your/video.mp4', ref: 'video2' },&nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; },&nbsp; },&nbsp; methods: {&nbsp; &nbsp; onClick({ ref }) {&nbsp; &nbsp; &nbsp; // Loop over all videos&nbsp; &nbsp; &nbsp; this.videos.forEach((video) => {&nbsp; &nbsp; &nbsp; &nbsp; // Get the DOM element for this video&nbsp; &nbsp; &nbsp; &nbsp; const $video = this.$refs[video.ref][0];&nbsp; &nbsp; &nbsp; &nbsp; // Play the video that the user clicked&nbsp; &nbsp; &nbsp; &nbsp; if (video.ref === ref) $video.play();&nbsp; &nbsp; &nbsp; &nbsp; // Pause all other videos&nbsp; &nbsp; &nbsp; &nbsp; else $video.pause();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; },};</script>请注意，这里我将其定义videos为计算属性。它可能是你的情况的一个支柱。此示例为每个视频分配一个ref字符串，以便稍后可以在处理程序中直接操作该视频onClick。