Saya memiliki komponen umpan yang berkembang pada aplikasi nuxt.js di mana aktivitas (posting video, suka, komentar) dari banyak pengguna akan ditampilkan. Kita bisa berasumsi seperti newsfeed facebook, kita memiliki array video. Pengguna dapat mengklik dan memainkan salah satunya.

Feed.vue

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

Masalahnya, pengguna dapat mengklik beberapa video untuk diputar dan semua video sedang diputar dan membuat kekacauan. Sekarang yang saya inginkan adalah, jika ada pengguna yang mengklik video untuk diputar, semua video lain yang telah diputar sebelumnya harus dijeda. Apakah ada ide bagaimana saya bisa melakukan ini?

-1
Kollol 19 November 2020, 16:00

1 menjawab

Jawaban Terbaik

Inilah solusi yang berfungsi (setelah Anda memperbarui URL video):

<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>

Perhatikan bahwa di sini saya mendefinisikan videos sebagai properti yang dihitung. Ini mungkin penyangga dalam kasus Anda. Contoh ini menetapkan string ref ke setiap video sehingga video tersebut nantinya dapat langsung dimanipulasi di pengendali onClick.

1
David Weldon 20 November 2020, 05:01