Vue JS - 使用 v-for 进行视频处理 play/pause

Question

我接受使用请求的视频链接然后使用 v-for 我显示它们问题是播放按钮只适用于一个视频，而不适用于所有视频，我想播放每个视频也暂停在这里是我的代码

<video
  width="206"
  height="126"
  :src="c.video"
  @playing="updatePaused"
  @pause="updatePaused"
  @canplay="updatePaused"
></video>

  <span v-show="paused" @click="play" class="play_btn1"
    ><i class="uil uil-play"></i
  ></span>
  <span
    v-show="playing"
    @click="pause"
    class="play_btn1"
    ><i class="uil uil-pause"></i
  ></span>

脚本

<script>
export default {
  computed: {
    playing() {
      return !this.paused;
    },
  },
  methods: {
    updatePaused(e) {
      this.videoElement = e.target;
      this.paused = e.target.paused;
    },
    play() {
      this.videoElement.play();
    },
    pause() {
      this.videoElement.pause();
    },
  },
  data() {
    return {
      videoElement: null,

    }
  },
};
</script>

Answer 1

您可以使用 ref 访问 HTML 元素。只需将 ref 与循环内的任何名称绑定，您就可以使用 this.$refs[<name>].

访问该元素

现在，由于 ref 在循环中，您必须使用 this.$refs[<name>][<loopIndex>].

访问它

在此处了解有关参考的更多信息：https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

new Vue({
  el: "#app",
  data() {
    return {
      videosState: {},
      videos: [
        {
          id: 1,
          url:
            "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
        },
        {
          id: 2,
          url:
            "https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_10mb.mp4"
        }
      ]
    };
  },
  methods: {
    changeVideoState(idx) {
      // Create initial state for the video if it
      // it doesn't exist
      if (!this.videosState[idx]) {
        /**
          When you add a new field to
          an object that doesn't exist 
          yet(in the object), vue doesn't 
          know about the changes. So `this.$set`
          notifies vue about the change
          so that vue can update the
          dom correctly.
        */
        this.$set(this.videosState, idx, {
          play: false
        })
      }

      const isPlaying = this.videosState[idx].play;
      const video = this.$refs.video[idx];

      if (!isPlaying) {
        video.play();
      } else {
        video.pause();
      }

      this.videosState[idx].play = !isPlaying
    }
  }
});

<div id="app">
  <div
    v-for="(video, idx) in videos"
    :key="video.id"
    style="
      display: inline-flex;
      flex-direction: column;
      margin-bottom: 1rem;
    "
  >
    <video ref="video" :src="video.url" width="400"></video>
    <button @click="changeVideoState(idx)">
      {{ videosState[idx] && videosState[idx].play ? "Pause" : "Play" }}
    </button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

注意： 如果你想在组件 loaded/created 时访问引用，你必须在 mounted 生命周期中进行：

new Vue({
    mounted() {
        // Access refs here
    }
})

引用仅在组件完全呈现后可用。

Vue JS - 使用 v-for 进行视频处理 play/pause

Vue JS - Video processing with v-for play/pause

javascript

video

vue.js

vuejs2