切换 play/pause 视频子组件

Question

我正在尝试点击父 div 来切换 play/pause 子视频。我运行遇到的问题是像 @ken 提到的普通功能，只能切换一个特定的视频，但如果有多个相同 div 和视频的实例则不能切换。

为了清楚起见，我还提供了我的源代码和评论的 Codepen，您应该可以在其中单击以切换视频的 play/pause：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>

切换 play/pause 视频子组件

Toggle play/pause of video child with component

html

javascript

vue.js

vue-component