मेरे पास nuxt.js अपील पर विकसित एक फ़ीड घटक है जहां एकाधिक उपयोगकर्ताओं की गतिविधि (वीडियो पोस्ट करें, पसंद करें, टिप्पणी करें) दिखाया जाएगा। हम फेसबुक के न्यूजफीड की तरह मान सकते हैं, हमारे पास वीडियो की एक श्रृंखला है। एक उपयोगकर्ता उनमें से किसी पर भी क्लिक कर सकता है और खेल सकता है।

फ़ीड.व्यू

<div v-for="(item, vidIndex) in videos":key="vidIndex">
    <div>
        <video :src="item.url" type="video/mp4"></video>
    </div>
</div>

समस्या यह है कि, उपयोगकर्ता चलाने के लिए कई वीडियो क्लिक कर सकता है और सभी वीडियो चलाए जा रहे हैं और गड़बड़ी पैदा करते हैं। अब मैं बस इतना चाहता हूं कि यदि कोई उपयोगकर्ता किसी वीडियो को चलाने के लिए क्लिक करता है, तो पहले चलाए गए अन्य सभी वीडियो को रोक दिया जाना चाहिए। क्या कोई विचार है कि मैं यह कैसे कर सकता हूं?

-1
Kollol 19 नवम्बर 2020, 16:00

1 उत्तर

सबसे बढ़िया उत्तर

यहां एक काम करने वाला समाधान है (एक बार जब आप वीडियो यूआरएल अपडेट कर लेते हैं):

<template>
  <div>
    <div v-for="video in videos" :key="video.ref">
      <video :ref="video.ref" :src="video.url" type="video/mp4" @click="onClick(video)"></video>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    videos() {
      return [
        { url: 'https://path/to/your/video.mp4', ref: 'video0' },
        { url: 'https://path/to/your/video.mp4', ref: 'video1' },
        { url: 'https://path/to/your/video.mp4', ref: 'video2' },
      ];
    },
  },
  methods: {
    onClick({ ref }) {
      // Loop over all videos
      this.videos.forEach((video) => {
        // Get the DOM element for this video
        const $video = this.$refs[video.ref][0];
        // Play the video that the user clicked
        if (video.ref === ref) $video.play();
        // Pause all other videos
        else $video.pause();
      });
    },
  },
};
</script>

ध्यान दें कि यहां मैं videos को परिकलित गुण के रूप में परिभाषित कर रहा हूं। यह आपके मामले में एक सहारा हो सकता है। यह उदाहरण प्रत्येक वीडियो को एक ref स्ट्रिंग प्रदान करता है ताकि बाद में वीडियो को सीधे onClick हैंडलर में हेरफेर किया जा सके।

1
David Weldon 20 नवम्बर 2020, 08:01