[英]How to pause all other videos while playing a single video in Vue.js/Nuxt.js?
我有一个在 nuxt.js 应用程序上开发的提要组件,其中将显示多个用户的活动(发布视频、点赞、评论)。 我们可以假设像 facebook 的新闻源一样,我们有一系列视频。 用户可以单击并播放其中任何一个。
饲料.vue
<div v-for="(item, vidIndex) in videos":key="vidIndex">
<div>
<video :src="item.url" type="video/mp4"></video>
</div>
</div>
问题是,用户可以单击多个视频进行播放,并且所有视频都在播放并造成混乱。 现在我想要的是,如果任何用户点击视频播放,之前播放过的所有其他视频都应该暂停。 有什么想法我该怎么做?
这是一个可行的解决方案(更新视频 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
处理程序中直接操作该视频。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.