Как приостановить все другие видео во время воспроизведения одного видео в Vue.js/Nuxt.js?


Как приостановить все другие видео во время воспроизведения одного видео в Vue.js/Nuxt.js?

19.11.2020 04:00:54 Просмотров 4 Источник

У меня есть компонент корма, развивающийся на nuxt.js приложение, в котором будет показана активность(публикация видео,лайк,комментарий) нескольких пользователей. Мы можем предположить, что, как и новостная лента facebook, у нас есть множество видео. Пользователь может нажать и воспроизвести любой из них.

кормить.Вью

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

Проблема в том, что пользователь может нажать несколько видео для воспроизведения, и все видео воспроизводятся и создают беспорядок. Теперь все, что я хочу, это то, что если какой-либо пользователь нажмет на видео для воспроизведения, все остальные видео, которые были воспроизведены ранее, должны быть приостановлены. Есть ли какая-нибудь идея, как я могу это сделать?

У вопроса есть решение - Посмотреть?

Ответы - Как приостановить все другие видео во время воспроизведения одного видео в Vue.js/Nuxt.js? / How to pause all other videos while playing a single video in Vue.js/Nuxt.js?

Является ответом!
David Weldon

19.11.2020 06:59:01

Вот рабочее решение (как только вы обновите URL-адреса видео):

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

Помочь в развитии проекта:
Закрыть X