Vuejs中v-for创建的多个视频子元素如何使用单个按钮play/stop？

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 创建的每个元素，所以我专注于如何同时暂停所有文件。

我试过了：

event.target

如图，我添加了@canplay="updatePaused"、@playing="updatePaused"、@pause="updatePaused"和mount loop以及相应的方法，有效，但只有最后一个文件，我只能停止播放单个视频文件。

$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，但像这样的方法应该可行。

Vuejs中v-for创建的多个视频子元素如何使用单个按钮play/stop？

How to use single button to play/stop multiple video child elements created by v-for in Vuejs?

vue.js

events

video.js

ref

v-for