Как использовать одну кнопку для воспроизведения / остановки нескольких дочерних элементов видео, созданных v-for в Vuejs? - PullRequest
Новая
       134

Как использовать одну кнопку для воспроизведения / остановки нескольких дочерних элементов видео, созданных v-for в Vuejs?

1 голос
/ 03 мая 2020

Мне нужно показать несколько видеофайлов, воспроизводимых одновременно .

, поэтому у меня есть этот код: 

<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. event.target

, как показано, я добавил @canplay="updatePaused", @playing="updatePaused", @pause="updatePaused", и смонтировать l oop, а также соответствующий метод, он работал, но только для последнего файла, я могу просто остановить воспроизведение одного видеофайла.

$ 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, кто-нибудь может мне здесь помочь? Спасибо !!

1 Ответ

0 голосов
/ 03 мая 2020

Из того, что я понял, вы хотите написать методы 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 ().

Я не совсем знаю API js video, но такой подход должен работать.

...