video progress edit

components/video-player/progress-bar.vue

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

components/video-player/video-player.vue

@@ -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 && res.data[0]){
-						if(res.code==200){
 							_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')

pages/study/courseStudy.vue

@@ -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 time = localStorage.getItem('videoProgressData')
-		// 		  var obj = JSON.parse(con.content)
+				  var arr = time&&JSON.parse(time) || {}
-		// 		  obj.isDrag = true
+				  //alert(con.progressVideo+'--'+con.id + '--'+JSON.stringify(arr))
-		// 		  con.content = JSON.stringify(obj)
+				  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('记录播放时间错误');