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

mobile video page edit

Browse Source
This commit is contained in:
joshen
2024-07-29 21:30:55 +08:00
parent fe310b2a71
commit e14ca569f6
6 changed files with 238 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,6 +30,10 @@ export default {
type: String,
default: "4px",
},
fullScreenFlag:{
type: Boolean,
default: false,
},
// 当前进度，范围0-1
currentProgress: {
type: Number,
@@ -46,8 +50,10 @@ export default {
data() {
return {
is_mousedown_progress: false, //是否点击了进度条并保持点击状态
current_width_px: 0, // 当前进度条的像素长度
init_clientX: 0, //初始进度的偏移量，相对于视口
current_width_px: 0, // 当前竖屏进度条的像素长度
current_height_px: 0, // 当前全屏进度条的像素长度
init_clientX: 0, //竖屏初始进度的偏移量，相对于视口
init_clientY: 0, //全屏初始进度的偏移量，相对于视口
dom_full: null, //完整进度条的dom，即进度条背景
};
},
@@ -73,6 +79,7 @@ export default {
window.addEventListener("touchend", (e) => {
console.log("touchend::",this.is_mousedown_progress)
this.up(e);
// e.preventDefault();
});
},
beforeDestroy() {
@@ -82,47 +89,91 @@ export default {
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.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('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;
if(this.fullScreenFlag){
// 全屏
// 获取完整进度条的clientY（dom左上角）
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;
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)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'start', current);
this.$emit("updateProgress",'start', current);
}else{
// 横屏
// 获取完整进度条的clientX（dom左上角）
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;
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)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
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.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::',e,this.isDrag,time,arr[this.blobId] ,current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'move', current);
if(this.fullScreenFlag){
// 全屏
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;
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)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'move', current);
}else{
// 横屏
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;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
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);
}
}
},
up() {
if (this.is_mousedown_progress) {
// 标记鼠标不处于按下的状态了
this.is_mousedown_progress = false;
this.$emit("getMouseDownStatus", false);
// 松开鼠标后，即调整进度条后，此时的进度（0-1）
let current = this.current_width_px / this.dom_full.clientWidth;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
console.log('up::',this.isDrag,time,arr[this.blobId] ,current)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'end', current);
// 标记鼠标不处于按下的状态了
this.is_mousedown_progress = false;
this.$emit("getMouseDownStatus", false);
if(this.fullScreenFlag){
// 全屏
// 松开鼠标后，即调整进度条后，此时的进度（0-1）
let current = this.current_height_px / this.dom_full.clientWidth;
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)
// 禁止拖动
if(!this.isDrag && time && arr[this.blobId] < current) return;
this.$emit("updateProgress",'end', current);
}else{
// 横屏
// 松开鼠标后，即调整进度条后，此时的进度（0-1）
let current = this.current_width_px / this.dom_full.clientWidth;
var time = localStorage.getItem('videoProgressData');
var arr = time&&JSON.parse(time) || {}
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);
}
}
},
},