已解決430363個問題，去搜搜看，總會有你想問的

如何在 Vue.js/Nuxt.js 中播放單個視頻時暫停所有其他視頻？

首頁猿問如何在...

如何在 Vue.js/Nuxt.js 中播放單個視頻時暫停所有其他視頻？

JavaScript

至尊寶的傳說 2023-08-18 17:02:08

我有一個在 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>問題是，用戶可以單擊多個視頻來播放，并且所有視頻都在播放并造成混亂?，F在我想要的是，如果任何用戶單擊要播放的視頻，則之前播放過的所有其他視頻都應該暫停。有什么想法我該怎么做嗎？

查看完整描述

1 回答

富國滬深

TA貢獻1790條經驗獲得超9個贊

這是一個可行的解決方案（更新視頻 URL 后）：

<div>

</div>

</template>

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。

反對回復 2023-08-18

1 回答
0 關注
206 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 Vue.js/Nuxt.js 中播放單個視頻時暫停所有其他視頻？

如何在 Vue.js/Nuxt.js 中播放單個視頻時暫停所有其他視頻？

1 回答

添加回答

如何在 Vue.js/Nuxt.js 中播放單個視頻時暫停所有其他視頻？

如何在 Vue.js/Nuxt.js 中播放單個視頻時暫停所有其他視頻？