From e14ca569f60a9364151de32f3fc457e24553ab82 Mon Sep 17 00:00:00 2001
From: joshen <445497689@qq.com>
Date: Mon, 29 Jul 2024 21:30:55 +0800
Subject: [PATCH] mobile video page edit
---
api/manage/manage.js | 8 +-
api/modules/courseStudy.js | 1 -
components/video-player/progress-bar.vue | 121 ++++++++++++------
components/video-player/video-player.vue | 151 +++++++++++++++++++++--
index.html | 1 +
pages/study/courseStudy.vue | 10 +-
6 files changed, 238 insertions(+), 54 deletions(-)
diff --git a/api/manage/manage.js b/api/manage/manage.js
index a3dd43b..dd80f71 100644
--- a/api/manage/manage.js
+++ b/api/manage/manage.js
@@ -26,9 +26,13 @@ const userTaskList = function(data){
const userDeleteStudy = function(data){
return ajax.postJson(baseURL,'/stu/project/stuCancelEnrollment',data);
}
-
+// 移动端视频播放器设置开关
+const getDictCode = function(code){
+ return ajax.get(baseURL+'/dict?code=' + code);
+}
export default {
getTaskNum,
userTaskList,
- userDeleteStudy
+ userDeleteStudy,
+ getDictCode
}
diff --git a/api/modules/courseStudy.js b/api/modules/courseStudy.js
index 57420bf..5318ce9 100644
--- a/api/modules/courseStudy.js
+++ b/api/modules/courseStudy.js
@@ -78,7 +78,6 @@ const studyInfo = function(courseId) {
* @param {Object} contentId
*/
const getStudyContentItem = function(studyId,contentId) {
- console.log(1111)
return ajax.post('/xboe/school/study/course/study-course-content',{studyId,contentId});
}
diff --git a/components/video-player/progress-bar.vue b/components/video-player/progress-bar.vue
index 783d9ee..9606c43 100644
--- a/components/video-player/progress-bar.vue
+++ b/components/video-player/progress-bar.vue
@@ -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);
+ }
}
},
},
diff --git a/components/video-player/video-player.vue b/components/video-player/video-player.vue
index 5359ea5..bb14083 100644
--- a/components/video-player/video-player.vue
+++ b/components/video-player/video-player.vue
@@ -1,9 +1,13 @@
-
-