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

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);
}

93
components/video-player/video-player.vue
View File

@@ -1,8 +1,9 @@
<template>
<view>
<view v-if="!xvideoBool" id="xvideoPlayer-box" :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
<view v-if="!xvideoBool || xvideoBool&&drag" id="xvideoPlayer-box" :class="fullScreenFlag?'video-box video-full-screen':'video-box'">
<div style="color:#ffffff">{{currtimeText}}</div>
<!--webkit-playsinline playsinline x5-video-player-type="h5-page-->
<!-- <video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageWidth/videoPageHeight*256)+'px':'','top':fullScreenFlag?videoPageHeight/2+'px':''}" -->
<!-- :src="url" <video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageWidth/videoPageHeight*256)+'px':'','top':fullScreenFlag?videoPageHeight/2+'px':''}" -->
<video id="xvideoPlayer" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%',height: fullScreenFlag?videoPageWidth+'px': '','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2+'px':''}"
:src="url"
:controls="false"
@@ -19,7 +20,8 @@
@loadeddata="onLoad"
@loadedmetadata="onMetaLoad"
@controlstoggle="onControlsToggle"
></video>
>
</video>
<view id="xplayer-control">
<!-- <view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight+'px':'100%','margin-left':fullScreenFlag?'-320px':'','top':fullScreenFlag?'300px':videoFullHeight + 'px'}"> -->
<view class="process-container" v-if="contrlShow" :class="fullScreenFlag?'video-scree-rotate':''" :style="{width: fullScreenFlag?videoPageHeight*0.98+'px':'96%','margin-top':-1*videoPageHeight*0.02+'px','margin-left':fullScreenFlag?-1*(videoPageHeight-videoPageWidth)/2-174 - (videoPageWidth-375)/2+'px':'','bottom':fullScreenFlag?'auto':'0px'}">
@@ -72,7 +74,7 @@
</view>
</view>
</view>
<view v-if="xvideoBool" class="video-box-error">
<view v-if="xvideoBool && !drag" class="video-box-error">
<view style="color: #ffffff;padding: 0px 50px 0px;font-size: 16px;">{{mobileVideoDragText}}</view>
<button style="display: inline-block;font-size: 14px;padding: 0px 10px;line-height: 28px;" v-if="mobileVideoDragSwitch == 'true'" @click="xvideoBoolFun">仍要使用此浏览器观看</button>
</view>
@@ -151,6 +153,10 @@
// horizontalScreenFlag: true // 默认竖屏
mobileVideoDragSwitch: '', // 视频播放器扔要使用此浏览器观看
mobileVideoDragText: '', // 视频播放器妆容提示文本内容
currtimeText: 0,
currentTimeFormat: "00:00", // 当前播放进度的文字
fullTimeFormat: "00:00", // 视频总长度的文字
iosCurrentTime: 0, // ios里视频播放毫秒
};
},
computed: {
@@ -158,17 +164,34 @@
},
watch:{
url(newVal,oldVal){
//console.log( 'watch url:',newVal,oldVal,this.videoContext)
//document.getElementById('xvideoPlayer').style.display = 'none'
this.videoContext.stop();
this.playing=false;
this.curVideo.currentTime = 0;
this.iosCurrentTime = 0;
this.sliderValue = 0;
this.videoSpeed = 1.0;
this.currtime = "00:00";
document.getElementsByTagName('video')[0].load()
setTimeout(()=>{
document.getElementsByTagName('video')[0].play()
},100)
//this.videoContext.load();
//document.getElementById('xvideoPlayer').style.display = 'block'
//this.videoContext=uni.createVideoContext("xvideoPlayer", this);
},
inittime(newVal,oldVal){
this.initPlayingTime=newVal;
//console.log('inittime::',newVal,oldVal)
}
},
mounted() {
var _this = this
this.initPlayingTime=this.inittime;
this.videoContext=uni.createVideoContext("xvideoPlayer", this);
document.getElementsByTagName('video')[0].load()
uni.getSystemInfo({
success: function (info) {
//alert(info.windowWidth)
@@ -177,7 +200,27 @@
// 你可以在这里根据窗口高度进行后续操作
}
});
this.dictCode();
if(this.xvideoBool) this.dictCode();
// 每一秒更新进度条
setInterval(() => {
// 定时更新进度条
// if (this.isPlaying && !this.isMousedownProgress) {
// this.currentProgress = this.videoContext.currentTime / this.videoContext.duration;
// }
if (this.playing && !this.isMousedownProgress) {
this.iosCurrentTime = this.iosCurrentTime + 1
// this.sliderValue = this.iosCurrentTime/this.curVideo.duration * 100
}
// 定时更新进度的文字显示
this.updateProgressText();
}, 1000);
//绑定全局监听器
window.addEventListener("touchstart", (e) => {
if(this.speedListShow && !e.target.closest('.speed-control')){
this.speedListShow = false
}
},{ passive: false });
},
methods: {
xvideoBoolFun(){
@@ -187,11 +230,9 @@
dictCode(){
var _this = this
apiManage.getDictCode('mobile_video_switch').then(res=>{
console.log('字典res::',res.code,res.data[0].name)
if(res.code==200){
if(res.code==200 && res.data[0]){
_this.mobileVideoDragText = res.data[0].name
_this.mobileVideoDragSwitch = res.data[0].value
console.log('11111:',_this.mobileVideoDragText,_this.mobileVideoDragSwitch)
}
})
},
@@ -207,6 +248,8 @@
this.druationTime = this.formatSeconds(duration);
this.currtime = this.formatSeconds(second);
this.iosCurrentTime = second;
//alert('1---this.currtime='+this.currtime)
// var duration=this.curVideo.duration;
// var second= value * duration;
if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
@@ -237,7 +280,6 @@
this.videoFullHeight=190
if(document && document.exitFullscreen){
document.body.scrollTop = 0; // 对Safari
document.documentElement.scrollTop = 0; // 对Chrome, Firefox, IE 和 Opera
document.exitFullscreen();
@@ -335,11 +377,13 @@
}else{
}
// alert(this.sliderValue)
this.druationTime = this.formatSeconds(duration);
//console.log(this.druationTime,'this.druationTime');
this.currtime = this.formatSeconds(second);
this.iosCurrentTime = second;
// alert('2---this.currtime='+this.currtime)
// var time = localStorage.getItem('videoProgressData')
// //alert(1)
// if(time && !this.drag || !this.drag && !time ){
@@ -376,6 +420,7 @@
this.updateState= true //完成拖动后允许更新滚动条
this.druationTime = this.formatSeconds(duration);
this.currtime = this.formatSeconds(second);
//alert('3---this.currtime='+this.currtime)
}
},
onFullScreen(e) {
@@ -481,9 +526,37 @@
this.$emit('play')
},
onTimeUpdate(e){
this.currtimeText = this.currtimeText + 1
this.videoUpdate(e);
this.$emit('timeupdate',e)
},
/* 更新视频进度的文字显示
*/
updateProgressText() {
// console.log('updateProgressText this.videoContext::',this.videoContext,this.iosCurrentTime)
this.currentTimeFormat = this.secondTimeFormat(this.iosCurrentTime);
this.fullTimeFormat = this.secondTimeFormat(this.curVideo.duration);
},
/* 时间格式化，秒格式化成xx:xx:xx
*/
secondTimeFormat(second) {
if(second<0) second = 0;
let result = parseInt(second);
let h =
Math.floor(result / 3600) < 10
? "0" + Math.floor(result / 3600)
: Math.floor(result / 3600);
let m =
Math.floor((result / 60) % 60) < 10
? "0" + Math.floor((result / 60) % 60)
: Math.floor((result / 60) % 60);
let s =
Math.floor(result % 60) < 10
? "0" + Math.floor(result % 60)
: Math.floor(result % 60);
result = `${m}:${s}`; // ${h}:
return result;
},
onPause() {
this.playing=false;
this.$emit('pause')

35
pages/study/courseStudy.vue
View File

@@ -778,19 +778,24 @@
playContent(con,conIndex,catIndex){
// 视频设置禁用处理逻辑,如果用户已全部观看完该视频，则设置为能全部拖动的逻辑，把isDrag设置为true即可,同时删除本地存储的数据
if(con.progressVideo ===1){
var obj = JSON.parse(con.content)
obj.isDrag = true
con.content = JSON.stringify(obj)
// if(con.progressVideo ===1){
// var obj = JSON.parse(con.content)
// obj.isDrag = true
// con.content = JSON.stringify(obj)
var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {}
//alert(con.progressVideo+'--'+con.id + '--'+JSON.stringify(arr))
delete arr[con.id];
localStorage.setItem('videoProgressData',JSON.stringify(arr))
}
if(con.progressVideo>0 && con.progressVideo !==1){
var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {}
arr[con.id] = con.progressVideo
localStorage.setItem('videoProgressData',JSON.stringify(arr))
}
// var time = localStorage.getItem('videoProgressData')
// var arr = time&&JSON.parse(time) || {}
// alert(con.progressVideo+'--'+con.id + '--'+JSON.stringify(arr))
// delete arr[con.id];
// localStorage.setItem('videoProgressData',JSON.stringify(arr))
// }
console.log('更换播放内容 playContent::',con,conIndex,catIndex)
//对于需要控制学习顺序的
if(conIndex!=undefined && catIndex!=undefined) {
@@ -1554,7 +1559,6 @@
let intTime=parseInt(e.detail.currentTime);
if(intTime>this.videoPlayingTime){
this.videoPlayingTime=intTime;
//判断是否完成
let completeType=this.curriculumData.completeSetup;
let completeSecond=this.curriculumData.second;
@@ -1579,6 +1583,7 @@
//以下是每隔10秒存储一下进度
let saveTime=Math.floor(intTime%10);
//console.log(intTime,saveTime,'aa',this.curContent.studyItemId)
console.log('3333:',this.preTime,intTime , saveTime,this.curContent.studyItemId)
if(this.preTime!=intTime && saveTime==0 && this.curContent.studyItemId!=''){
this.preTime=intTime;
this.curContent.lastStudyTime=intTime;
@@ -1593,13 +1598,14 @@
if(!this.curriculumData.isDrag && this.curContent.progressVideo !=1){
var time = localStorage.getItem('videoProgressData')
var arr = time&&JSON.parse(time) || {}
console.log('this.curContent.progressVideo::',arr[this.blobId],this.curContent.progressVideo,arr[this.blobId])
if(arr[this.blobId] && this.curContent.progressVideo<arr[this.blobId]) {
postData.progressVideo = arr[this.blobId]
postData.contentId = this.curContent.id
postData.courseId = this.curContent.courseId
}
}
//alert(intTime+'----'+this.videoPlayingTime)
apiCourseStudy.studyVideoTime(postData).then(rs=>{
if(rs.status!=200){
console.log('记录播放时间错误');
@@ -1662,7 +1668,9 @@
//以下是每隔10秒存储一下进度
let saveTime=Math.floor(intTime%10);
//console.log(intTime,saveTime,'aa',this.curContent.studyItemId)
if(this.preTime!=intTime && saveTime==0 && this.curContent.studyItemId!=''){
this.preTime=intTime;
this.curContent.lastStudyTime=intTime;
//记录播放时间
@@ -1680,6 +1688,7 @@
postData.courseId = this.curContent.courseId
}
}
//alert(this.preTime!=intTime +'---'+ saveTime +'---'+ this.curContent.studyItemId)
apiCourseStudy.studyVideoTime(postData).then(rs=>{
if(rs.status!=200){
console.log('记录播放时间错误');