如何使用单个按钮播放/停止Vuejs中v-for创建的多个视频子元素

Question

我需要显示多个视频文件同时播放。

所以我有这个代码：

<b-row class="justify-content-md-center">
<b-col>
<li v-for="(video, index) in videoArray" :key='(video, index)'>
<video 
v-if=" index % 2 == 0 " 
:ref="videoPlayer" 
@canplay="updatePaused"
@playing="updatePaused"
@pause="updatePaused"
class="video-js vjs-custom-skin vjs-16-9"
controls autoplay loop preload="auto"
data-setup='{}'>
<source v-bind:src="require(`./storage/${video}`)" type="video/mp4">
</video>
</li>
</b-col>
<b-col>
<li v-for="(video, index) in videoArray" :key='(video, index)'>
<video 
v-if=" (index+1) % 2 == 0 "
:ref="`videoPlayer${index}`" 
@canplay="updatePaused"
@playing="updatePaused"
@pause="updatePaused"
class="video-js vjs-custom-skin vjs-16-9"
controls autoplay loop preload="auto"
data-setup='{}'>
<source v-bind:src="require(`./storage/${video}`)" type="video/mp4">
</video>
</li>
</b-col>
<div id="button">
</b-row>
<b-row class="justify-content-md-center">
<b-button @click="generalPlay" :pressed.sync="playStatus" variant="outline-light">Play All</b-button>
<b-button @click="stopPlay" :pressed.sync="playStatus" variant="outline-light">Stop All</b-button>
</b-row>
</div>

视频播放器打算从数据存储中读取数据并播放，正如你所看到的，播放器可以读取视频文件并做好准备，但我无法使用单个按钮播放所有文件或暂停所有文件。当我试图解决这个问题时，我意识到我不能使用按钮来触发v-for创建的每个元素，所以我专注于如何同时暂停所有文件。

我试过了：

1. 事件.target

如图所示，我添加了@canplay="updatePaused"、@playing="updatePaused"、@pause="updatePaused"和挂载循环以及相应的方法，它起作用了，但仅对最后一个文件，我只能停止播放单个视频文件。

2. $ref

然后我使用$ref，甚至尝试读取v-for的索引，看看它是否有效，但仍然失败。

export default {
name: 'player',
data () {
return {
videoElement: null, 
videoArray: [],
}
},
mounted () {
let count = storageList.length;
while (count--) {
if(storageList[count].type == "video") {
this.videoArray.push(storageList[count].filename);
//storageList is data storage file
}
}
},
methods: {
/*
updatePaused(event) { 
this.videoElement = event.target;
},
*/
stopPlay: () => {
for( let index in this.videoArray ) {      
videojs(this.$refs[`videoPlayer${index}`]).pause();
//ideojs(this.$refs.videoPlayer).pause()
//videojs(this.videoElement).pause(); 
}
}
},
}

我真的不知道我对Vuejs有限的经验和知识能做些什么，有人能帮我吗？谢谢

Answer 1

据我所知，您想要编写generalPlay和stopPlay方法。

查询视频元素并停止它们可能更容易，而不是存储它们的引用。

stopPlay: () => {
let videoElements = this.$el.querySelectorAll('video')
for (let i = 0; i < videoElements.length; i++) {
videoElements[i].pause() // or videojs(videoElements[i]).pause()
}
}

然后对该剧执行同样的操作，但使用videoElements[i].play((。

我不太了解videojs API，但这样的方法应该有效。