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

video progress edit

Browse Source
This commit is contained in:
joshen
2024-08-01 14:39:21 +08:00
parent e14ca569f6
commit 9bc179c583
3 changed files with 131 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,14 +70,14 @@ export default {
// });
//绑定全局监听器
window.addEventListener("touchmove", (e) => {
console.log("touchmove::",this.is_mousedown_progress)
//console.log("touchmove::",this.is_mousedown_progress)
if (this.is_mousedown_progress) {
this.move(e);
e.preventDefault();
}
},{ passive: false });
window.addEventListener("touchend", (e) => {
console.log("touchend::",this.is_mousedown_progress)
//console.log("touchend::",this.is_mousedown_progress)
this.up(e);
// e.preventDefault();
});
@@ -97,9 +97,11 @@ export default {
this.current_height_px = e.touches[0].clientY - init_clientY;
// 设置当前的播放进度（同时作用于当前进度条的样式）
let current = (e.touches[0].clientY - init_clientY) / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('start::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,e.touches[0].clientY,init_clientY,this.dom_full.clientHeight,this.current_height_px,this.dom_full)
//console.log('start::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,e.touches[0].clientY,init_clientY,this.dom_full.clientHeight,this.current_height_px,this.dom_full)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
@@ -112,9 +114,11 @@ export default {
this.current_width_px = e.touches[0].clientX - init_clientX;
// 设置当前的播放进度（同时作用于当前进度条的样式）
let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('start::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,e.touches[0].clientX,init_clientX,this.dom_full.clientWidth)
//console.log('start::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,e.touches[0].clientX,init_clientX,this.dom_full.clientWidth)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
@@ -128,9 +132,11 @@ export default {
let init_clientY = this.dom_full.getBoundingClientRect().top;
this.current_height_px = e.touches[0].clientY - init_clientY;
let current = (e.touches[0].clientY - init_clientY) / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('move::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,this.dom_full)
//console.log('move::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,this.dom_full)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'move', current);
@@ -139,9 +145,11 @@ export default {
let init_clientX = this.dom_full.getBoundingClientRect().left;
this.current_width_px = e.touches[0].clientX - init_clientX;
let current = (e.touches[0].clientX - init_clientX) / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('move::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current)
//console.log('move::',e,this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'move', current);
@@ -157,9 +165,11 @@ export default {
// 全屏
// 松开鼠标后，即调整进度条后，此时的进度（0-1）
let current = this.current_height_px / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('up::',this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,this.dom_full)
//console.log('up::',this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current,this.dom_full)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'end', current);
@@ -167,9 +177,11 @@ export default {
// 横屏
// 松开鼠标后，即调整进度条后，此时的进度（0-1）
let current = this.current_width_px / this.dom_full.clientWidth;
if(current>1) current = 1;
if(current<0) current = 0;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('up::',this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current)
//console.log('up::',this.isDrag,this.fullScreenFlag,time,arr[this.blobId] ,current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'end', current);
@@ -204,7 +216,7 @@ export default {
left: 0;
top: 0;
height: inherit;
width: 50%;
width: 0%;
display: inline-block;
background-color: var(--primaryColor);
}