@@ -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}}
-
-
+
+
+
+