video progress edit

2025-12-06 09:26:45 +08:00 · 2024-08-01 14:39:21 +08:00
parent e14ca569f6
commit 9bc179c583
3 changed files with 131 additions and 37 deletions
--- a/components/video-player/progress-bar.vue
+++ b/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);
 }
--- a/components/video-player/video-player.vue
+++ b/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){
+						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) { //完成拖动后，计算对应时间并跳转到指定位置
@@ -214,7 +257,7 @@
 						if(type === 'start'){
 							this.updateState= false;
 						}
-					   if( type === 'end'){
+						if( type === 'end'){
 							this.videoContext.seek(second);
 							this.curVideo.currentTime = second;
 							this.updateState= true //完成拖动后允许更新滚动条
@@ -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();
@@ -316,9 +358,9 @@
 				  },
 				// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
 				videoUpdate(e) {
-
+					
 					this.historyTime = e.detail.currentTime
-
+					
 					let duration=this.curVideo.duration;
 					let sliderValue = e.detail.currentTime / duration * 100;
 					let second=sliderValue / 100 * duration;
@@ -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')