diff --git a/components/video-player/progress-bar.vue b/components/video-player/progress-bar.vue index 106ed7f..783d9ee 100644 --- a/components/video-player/progress-bar.vue +++ b/components/video-player/progress-bar.vue @@ -8,9 +8,9 @@
@@ -56,13 +56,22 @@ export default { //初始化一些固定数据 let dom_full = this.$el.getElementsByClassName("progress-full")[0]; this.dom_full = dom_full; + // window.addEventListener("touchstart", (e) => { + // console.log("touchstart::",this.is_mousedown_progress) + // //if (this.is_mousedown_progress) { + // this.down(e); + // //} + // }); //绑定全局监听器 window.addEventListener("touchmove", (e) => { + console.log("touchmove::",this.is_mousedown_progress) if (this.is_mousedown_progress) { - this.move(e); + this.move(e); + e.preventDefault(); } - }); + },{ passive: false }); window.addEventListener("touchend", (e) => { + console.log("touchend::",this.is_mousedown_progress) this.up(e); }); }, @@ -70,35 +79,34 @@ export default { // }, methods: { - down(e) { - + start(e) { this.$emit("getMouseDownStatus", true); this.is_mousedown_progress = true; // 获取完整进度条的clientX(dom左上角) let init_clientX = this.dom_full.getBoundingClientRect().left; // 计算调整后的当前进度条的长度 - this.current_width_px = e.clientX - init_clientX; + this.current_width_px = e.touches[0].clientX - init_clientX; // 设置当前的播放进度(同时作用于当前进度条的样式) - let current = (e.clientX - init_clientX) / this.dom_full.clientWidth; + let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth; var time = localStorage.getItem('videoProgressData'); var arr = time&&JSON.parse(time) || {} - console.log('down::',this.isDrag,time,arr[this.blobId] ,current) + console.log('start::',e,this.isDrag,time,arr[this.blobId] ,current,e.touches[0].clientX,init_clientX,this.dom_full.clientWidth) // 禁止拖动 if(!this.isDrag && time && arr[this.blobId] < current) return; - this.$emit("updateProgress", current); + this.$emit("updateProgress",'start', current); }, move(e) { if (this.is_mousedown_progress) { let init_clientX = this.dom_full.getBoundingClientRect().left; - this.current_width_px = e.clientX - init_clientX; - let current = (e.clientX - init_clientX) / this.dom_full.clientWidth; + this.current_width_px = e.touches[0].clientX - init_clientX; + let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth; var time = localStorage.getItem('videoProgressData'); var arr = time&&JSON.parse(time) || {} - console.log('move::',this.isDrag,time,arr[this.blobId] ,current) + console.log('move::',e,this.isDrag,time,arr[this.blobId] ,current) // 禁止拖动 if(!this.isDrag && time && arr[this.blobId] < current) return; - this.$emit("updateProgress", current); + this.$emit("updateProgress",'move', current); } }, up() { @@ -113,7 +121,7 @@ export default { console.log('up::',this.isDrag,time,arr[this.blobId] ,current) // 禁止拖动 if(!this.isDrag && time && arr[this.blobId] < current) return; - this.$emit("updateProgress", current); + this.$emit("updateProgress",'end', current); } }, diff --git a/components/video-player/video-player.vue b/components/video-player/video-player.vue index 9e9e2c5..5359ea5 100644 --- a/components/video-player/video-player.vue +++ b/components/video-player/video-player.vue @@ -22,11 +22,12 @@ {{currtime}} - - + + + +