hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-06 17:36:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

播放器禁止拖动设置修改

Browse Source
This commit is contained in:
joshen
2024-06-24 08:40:05 +08:00
parent a7c041b010
commit fe310b2a71
3 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/video-player/progress-bar.vue
View File

@@ -8,9 +8,9 @@
<div
class="progress-bar"
:style="{width: width}"
@mousedown.left="down"
@mousemove="move"
@mouseup="up"
@touchstart.left="start"
@touchmove="move"
@touchend="up"
>
<div class="progress-full" :style="{height: height}">
<div class="progress-current" :style="{width: currentProgress + '%'}"></div>
@@ -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);
}
},