在Vue.JS中播放循环Vue.JS中的特定视频

Question

让我们假设这个2视频是for循环的输出，它使用play()方法和一个索引参数。我如何播放特定的视频，因为当我触发播放方法时，它也会播放第二个视频。

组件的

<div class="relative">
  <video id="videoElement" class="sm:hidden block md:h-auto md:w-auto w-full h-auto object-cover object-center mx-auto focus:outline-none" controls="false" v-play="playing">
    <source src="~/assets/video/video1.mp4" type="video/mp4">
  </video>
  <img @click="play('1')" src="~/assets/img/play-button.svg" class="sm:hidden h-12 w-12 absolute m-auto inset-0 z-50 top-0">
 </div>
<div class="relative">
  <video id="videoElement" class="sm:hidden block md:h-auto md:w-auto w-full h-auto object-cover object-center mx-auto focus:outline-none" controls="false" v-play="playing">
    <source src="~/assets/video/video2.mp4" type="video/mp4">
  </video>
  <img @click="play('2')" src="~/assets/img/play-button.svg" class="sm:hidden h-12 w-12 absolute m-auto inset-0 z-50 top-0">
 </div>

组件的JavaScript

export default { 
  data(){
  return {
    playing: false
  }
 },
 computed: {
    paused() {
      return !this.playing;
    }
  },
  directives: {
    play: {
      bind(el, binding, vnode) {
        el.addEventListener('playing', () => {
          vnode.context[binding.expression] = !el.paused;
        });
        el.addEventListener('pause', () => {
          vnode.context[binding.expression] = !el.paused;
        });
        vnode.context[binding.expression] = !el.paused;
      },
      update(el, binding) {
        if (el.paused) {
          if (binding.value) {
            el.play();
          }
        } else if (!binding.value) {
          el.pause();
        }
      }
    }
  },
  methods: {
    play(index) {
    this.playing = !this.playing;      
    },  
    pause() {
      this.playing = false;
    }
  }
 }
</script>

Answer 1

将注释转换为答复以供将来参考

我的工作小提琴版本：https://jsfiddle.net/jfpwtkm0/1免费分享你的想法：

我使用了

• I，因为您在带有重复id的视频上的HTML是很奇怪的，因为它在实际的视频数据蚀刻情况下是实用的，而不是手动模板，每个视频
• 自定义指令都没有映射到每个对象的playing状态，所以我已经更改了该格式，以便使用他们的id playing toggle(id)方法分配给视频，因为您计划更改playState，所以在多个元素中包含d12，所以videoObject的D13是不实用的。H 214H 115相同的id多个元素中的值是不实际的。我指定了videoArray的id是唯一的.

如果这个答案解决了你的问题，绿色滴答会有很大帮助，干杯:)