点击关闭按钮后视频仍在后台播放的问题

Question

请问老师，我对视频播放这个功能有个问题。我发现课程中的商品页面的视频容器即使是点击了关闭按钮，video-box 元素也 slideUp 隐藏了，但是视频仍然在后台播放。

我觉得从逻辑上说点击了关闭就应该不要播放了，或者如果真有点击了关闭就要求不要在后台播放的需求。

基于上方的逻辑，于是我自己加了点代码在 closeVideo() 中，实现了关闭后不播放，但只是实现了暂停功能。请问有没有方法能实现关闭了之后再点击播放是从头播放的呢？

我基于课程代码的改动如下：

<video id="product-video" src="/imgs/product/video.mp4" muted autoplay controls="controls"></video>

closeVideo() {
  this.showSlide = 'slideUp';
  setTimeout(() => {
    this.showSlide = '';
  }, 600);
  let productVideo = document.getElementById('product-video');
  productVideo.pause();
}

Answer 1

河畔一角 2020-06-07 07:47:15

这个问题提的很好，我在课程里面也确实没讲。目前可以考虑直接隐藏组件试试，也就是v-if标签控制video标签的显示和隐藏。等slideUP以后，把video隐藏掉。等点击的时候先显示，在slideDown。如果这种方案不可行，后面我在找其它方案，因为最近老婆生孩子，没顾得上看。

Answer 2

刘亦菲真好看 2020-12-12 22:57:17

<video src="/imgs/product/video.mp4" controls="controls" muted ref="vido"></video>

  methods: {
    showSlide() {
      this.slide = true;
      this.$refs.vido.currentTime = 0;
      this.$refs.vido.play();
    },

    closeSlide() {
      this.slide = false;
      this.$refs.vido.pause();
    },
  },

这样处理应该可以，我把自动播放的属性去掉了，好像跟play方法有冲突

• 别人都说我可帅 #1

  这样子也只是暂停了，再点击的时候并不是从头开始播放的