点击关闭按钮后视频仍在后台播放的问题
来源：8-6 产品站交互实现
Rainforest975
2020-06-07
请问老师，我对视频播放这个功能有个问题。我发现课程中的商品页面的视频容器即使是点击了关闭按钮，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();
}
写回答
2回答
-
河畔一角
2020-06-07
这个问题提的很好，我在课程里面也确实没讲。目前可以考虑直接隐藏组件试试，也就是v-if标签控制video标签的显示和隐藏。等slideUP以后，把video隐藏掉。等点击的时候先显示，在slideDown。如果这种方案不可行，后面我在找其它方案，因为最近老婆生孩子，没顾得上看。
30 -
刘亦菲真好看
2020-12-12
<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方法有冲突
012023-03-05
相似问题