用组件切换子视频的播放/暂停

Question

我试图点击父div来切换播放/暂停儿童视频。我遇到的问题是，像@ken提到的正常功能，只有一个特定的视频可以切换，但如果有相同的div和视频的多个实例，则不能切换。

为了澄清目的，我还提供了我的源代码和注释的代码，您应该能够单击以切换视频的播放/暂停:https://codepen.io/pen/yLbrWxv

我想也许这可以实现与vue.component?

提前感谢，克里斯!

<div id="app">
<table class="storys-table">
<tr v-for="spalte in spalten" class="storys-table-tr">
<td class="storys-table-td">


<! –– When you click on this div, the child video should start or stop playing ––>       
<div class="allcontainer has-dropdown" is="clicktoggle">
<! –– ------------------------------------------------------------------------ ––>             

<div class="influencer-container">
<img class="thumbnails" :src="spalte.PostThumbnail">
<div class="influencer-name">{{spalte.Influencer}}</div>
</div>
<div class="overlay-container dropdown">
<div class="transparent-overlay">
<div class="overlay-content">
<table>
<tr>
<td class="firstrow">
<div class="iframe-limiter">


<! –– This is the video that should start/stop to play when div.allcontainer is clicked ––>   
<video width="373" height="663" controls :poster="spalte.PostThumbnail">
<source :src="spalte.PostLink" type='video/mp4'>
</video>
<! –– ---------------------------------------------------------------------------- ––>                                    
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>

Vue.component("clicktoggle", {
template: `<div :class="{ 'is-open': toggle }" @click="toggle = !toggle"><slot></slot></div>`,
data() {
return {
toggle: false
}
}
})
const livereportUrl =
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTLwSIhrM2gwlrmhPN6CHStapjHkuQdFD0PuVVu-XEB0Eyek3JYL_4jI1naYNZOTeGu2_aQYCIxajmK/pub?output=csv";
const app = new Vue({
el: "#app",
data: function() {
return {
spalten: [],
};
},
created: function() {
this.fetchOverall();
},
methods: {
fetchOverall() {
Papa.parse(livereportUrl, {
download: true,
header: true,
complete: (results) => this.spalten = results.data
});
},
}
});

Answer 1

应该没问题。检查这个。

<div id="app">
<video ref="videotest"
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
width="400"></video>
<button @click="toggle">Toggle</button>
</div>

new Vue({
el: '#app',
data() {
return {
isPlaying: false
}
},
methods: {
toggle() {
if (this.isPlaying) {
this.$refs.videotest.pause()
this.isPlaying = false
} else {
this.$refs.videotest.play()
this.isPlaying = true
}
}
}
})

---

[8月17日更新]

让我给你一个简单的例子，下面有多个视频。希望它能给你一些指导如何解决你的问题。

new Vue({
el: "#app",
data() {
return {
videos: [
"https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
"https://ia902704.us.archive.org/23/items/SantasSuprise/SantasSuprise_512kb.mp4",
"https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
]
};
},
methods: {
toggle(index) {
if (this.$refs.videotest[index].paused) {
this.$refs.videotest[index].play();
} else {
this.$refs.videotest[index].pause();
}
}
}
});

<script src="https://unpkg.com/vue/dist/vue.min.js"></script></script>
<div id="app">
<div v-for="(video, index) in videos">
<div @click="toggle(index)">
<video ref="videotest" :src="video" width="400"></video>
</div>
</div>
</div>