From 7297d37a257ef5db3809b872f8c3961f6b7d7c80 Mon Sep 17 00:00:00 2001
From: daihh <seastar@bjxask.com>
Date: Thu, 17 Nov 2022 19:51:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/video-player/images/back.png  | Bin 0 -> 537 bytes
 components/video-player/images/full.png  | Bin 0 -> 518 bytes
 components/video-player/images/pause.png | Bin 0 -> 385 bytes
 components/video-player/images/play.png  | Bin 0 -> 532 bytes
 components/video-player/video-player.vue | 278 +++++++++++++++++------
 pages/study/videoTest.vue                |  10 +-
 6 files changed, 217 insertions(+), 71 deletions(-)
 create mode 100644 components/video-player/images/back.png
 create mode 100644 components/video-player/images/full.png
 create mode 100644 components/video-player/images/pause.png
 create mode 100644 components/video-player/images/play.png

diff --git a/components/video-player/images/back.png b/components/video-player/images/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fe86c0e79f8a048bce4c2ab6c1ae57aa2fc731b
GIT binary patch
literal 537
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjjKx9jP7LeL$-D$|Tv8)E(|mmy
zw18|52FCVG1{RPKAeI7R1_tH@j10^`nh_+nfC(-uv49!D1}S`GTDlgftl87WF~o!S
z>eT&S%#H%b-n+b6>*TZihg{Rzu3NuYW(DcgaAf<wX8yt6Eg;Bb*SvsZS;z-omxq69
z@15OPzHZY^-6M_qo6XHXpFMN$oyzHdvqfAl`mT~}(lubq&Q;3ce!#}#=>9(amLKE!
z?jLI!RIi6Wv5{{M{lFII7{YYal;x8g+r<0^?+w$RS2mtY`#M>P@28cG+rOMShS4b-
zBfI}JiSG`Hn|#_(^`Om1b%&|*nR8EbTluc2lJ}7F4xO{G-e#8O{e+o8@&|NpsC7pF
zY{_d|r&z%|u{6N+L8!8F&r64c#Sad9*!((~vr~6P^5oLTpKe&Y_h<Y)SIHMYDdA1-
zwoDtIbRFBfx>kplJbu>I_lWNT`_w<%beFon&~N>IAoS{i+NJzXkI$a3zUb1|oYt+j
zY?oAn#?NU76t_#?YX525HFtp<(}~<Cw;sG&9{1m>u|1|)yK-C2T%{AcONzO^q$ety
z&y-nL)V<1U>v^|(5<73GKajd&KILnPlelca{WmWc{lD;A_@(IUnso02e?igW>FVdQ
I&MBb@0CNM^asU7T

literal 0
HcmV?d00001

diff --git a/components/video-player/images/full.png b/components/video-player/images/full.png
new file mode 100644
index 0000000000000000000000000000000000000000..44e378d46222897b5b94f12ed4de1d81dd1417c9
GIT binary patch
literal 518
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjjKx9jP7LeL$-D$|Tv8)E(|mmy
zw18|52FCVG1{RPKAeI7R1_tH@j10^`nh_+nfC(-uv49!D1}S`GTDlgftiaR7F~o!S
z?G#%tXGekKn*()hoV?CYI3(O*=qsRfgLTX1O`jQV9b?gPIpTN0Vb+$Fdm5(BO?WE#
zr>F9t+D+ci*LW*mS0_9^Fn{LUx!-61_3~O;ul<W<lFCk($TjMFPrK?nd<+YnW1r%!
zYZ4T#oyYFLAMr>u%4vJm&Yk@nKLigLbK4&IUfLXE_#wGkCH_Zk<HOlz=9Y`%O&Jmb
zt~c3z+|B1QCu_qSwM|tFMQg+}`1dZBO+LdQzvTs6z!N9de@#*c+JEdc+no|t)*E;6
z+nrZ0k66BA%hhRGZqZQfv1aD14a}cjXQ-MiFTOHmDW9)j`Zng+C&xvupS-(p-|q|S
z3zN%C-Q+V=cDC{|<OQndM~D4?VW-k(>|o#L@!$n-=iFn0d$Sl;vh`%2IA|SL`6s|!
z;a<pxJR98)tyu*@DtC6oU22G!_d??2Q~QPNPoigcPZOVd(rJIn_f6LnI%>Lq317Be
o;k4?<mIFWL$=a}gs-OIeE#Ru521ien3n&geUHx3vIVCg!02OJ;1^@s6

literal 0
HcmV?d00001

diff --git a/components/video-player/images/pause.png b/components/video-player/images/pause.png
new file mode 100644
index 0000000000000000000000000000000000000000..15d2a1296a17db95e0233bcb7e849bbd66c7cad6
GIT binary patch
literal 385
zcmeAS@N?(olHy`uVBq!ia0vp^5<o1&!3HF&pVhwuQjEnx?oJHr&dIz4a$Hg)JkxxA
z8MJ_G4hF{dOa>N^5+IfWVg?501&j>LK$;OGwtxvPE3tqX&Xxfw6yJI|7f8MKba4#v
z;C(yImW#<ypjEhDnw$Gzn0{iSVg<wc$EkZ-BW_1@xNq1{v|CpsEFhpKK4KG(qPLXx
z*#pYP`S;$W$VaaUvKKx!L(rnZd`Cm-o2M7f9N@fh;=rP^wr9sy?UA^~cfq0h+m~-i
zXCLtN9umG?BqTDO|2^B6X|GPtY}2SxD$l&F+Gt!8yfi9ETioMcc4d^nR-?!%I$c%*
zqD$6mM2eIuX#IG<{)Ee4M+MzeOw6tg#aAw?-upRWYs`j8yq{!bY}aXRy{6w)>N@45
z+&?u-UG6%|Wml35*sYJ0dFC#7e_>8D<Bld><FajC{A`jlZ&&YNI|%Z=r>mdKI;Vst
E0B%@<LI3~&

literal 0
HcmV?d00001

diff --git a/components/video-player/images/play.png b/components/video-player/images/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..d96547151372e39dccc8c528e5728df25c14a3ea
GIT binary patch
literal 532
zcmeAS@N?(olHy`uVBq!ia0vp^5<o1&!3HF&pVhwuQjEnx?oJHr&dIz4a$Hg)JkxxA
z8MJ_G4hF{dOa>N^5+IfWVg?501&j>LK$;OGwtxvPE3tqX&Xxfw6yJI|7pSbx)5S5w
zgZJ(<Lk-tNk>mG8gHA1o(3ups(p)Pt<)EA77c=g?5h(#i5xFVGUenT(lP5J^iH>uL
zjL<QP+_0n0eXiBI*ZbaAzu#=}^}Y4|pXa{+zF(ZbH%{-nzEa;~!!0epn)q3^beP=p
zycXzfpq%jA%lx(I&j60eY6@#L7cgxt_SqIteQIYl=K;o3UDbTY?{?m|PHl?1=zZ8w
zZTE`JVa1>B9CdhqX40J`qs6S#uO4@(xVxg~q~fce+{~$dlkOx0IZYJ19Cn{mXL0jc
zKC7cD`TRNeIvR`IJXXzEvnWmXmDC}Jh};b3*n~@}ti1tjr=(RPul253$gA^Pn?E<8
zaaU%nljI)8Sm(omBDT@Z^6_`&te&NRIm^7y`*nUwlXwGn#uxJ)64$H`3YLpA+H<LB
z*Qi%8g|XN?WfD)8Z?^r#&M^JyqU;@e7O^L&9#CHwaC^GxLH6F;D+2UmdQzIgJ%tL-
z*71EvUG#4M)8m;^nJxcsEA_L~GOb-u_uu`@zK@)0|4!)?ysrBMiV;s&KbLh*2~7ZN
CbjYLt

literal 0
HcmV?d00001

diff --git a/components/video-player/video-player.vue b/components/video-player/video-player.vue
index 590b1bc..1571c82 100644
--- a/components/video-player/video-player.vue
+++ b/components/video-player/video-player.vue
@@ -1,29 +1,58 @@
 <template>
-	<video id="myVideo" style="width: 100%;"
-		:src="url"
-		@error="videoErrorCallback" 
-		:initial-time="videoPlayingTime"
-		@play="onPlayerPlay"
-		@pause="onPlayerPause"
-		@ended="onPlayerEnded"
-		@timeupdate="onPlayerPlaying"
-		@fullscreenchange="onFullScreen"
-		controls>
-		<view class='process-container'>
-			<view class="video-controls-play">
-				<image :src="palyFlag ? '../../static/img/start.png' : '../../static/img/pause.png'" class='video-controls-icon' @click='videoOpreation'/>
+	<view class="video-box" @click="clickVideo" @dblclick="dbclickVideo">
+		<video id="myVideo" style="width: 100%;"
+			:src="url"
+			:controls="false"
+			@error="videoErrorCallback" 
+			:initial-time="videoPlayingTime"
+			@play="onPlayerPlay"
+			@pause="onPlayerPause"
+			@ended="onPlayerEnded"
+			@timeupdate="onPlayerPlaying"
+			@fullscreenchange="onFullScreen"
+			@loadeddata="onPalyerLoad"
+			@loadedmetadata="onPlayerMetaLoad"
+			@controlstoggle="onPlayerControlsToggle"
+			@dblclick="dbclickVideo"
+		>
+		</video>
+		<view v-if="contrlShow">
+			<view class="process-container">
+				<view class="controller-play">
+					<image :src="require(playing? './images/pause.png':'./images/play.png')"  @click='videoOpreation'/>
+				</view>
+				<view class="currtime">{{currtime}}</view>
+				<view class='slider-container'>
+					<slider @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
+				</view>
+				<view class="druationTime">{{druationTime}}</view>
+				<view class="druationTime">
+					<view id="myVideoSpeed" class="player-speed btn-speed">
+					  <view @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view>
+					  <view class="speed-control" v-if="speedListShow">
+					    <view class="speed-control-list">
+							<view class="li"
+								v-for="item in speedList"
+								:key="item"
+								@click="changeSpeed(item)"
+								:data-value="item"
+								:class="{'current': videoSpeed === Number(item)}">
+								{{ item }}x
+							</view>
+					    </view>
+					  </view>
+					</view>
+				</view>
+				<view class="controller-screen">
+					<image :src="require(fullScreenFlag? './images/back.png':'./images/full.png')"  @click='fullScreen'/>
+				</view>
 			</view>
-			<view class="currtime">{{currtime}}</view>
-		    <view class='slider-container'>
-		        <slider @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="16rpx"/>
-		    </view>
-			<view class="druationTime">{{druationTime}}</view>
-			<image :src="fullScreenFlag ? '../../static/img/videoBack.png' : '../../static/img/fullScreen.png'" class='video-controls-icon' @click='videoAllscreen'></image>
 		</view>
-	</video>
+	</view>
 </template>
-
 <script>
+	import {mapGetters} from 'vuex'
+	import studyUtil from '@/utils/study.js';
 	export default {
 		props: {
 			url:{
@@ -37,28 +66,48 @@
 		},
 		data() {
 			return {
-				fullScreenFlag: false,
-				currtime:'00:00:00',//当前播放时间 字符串 计算后
-				druationTime:'00:00:00',//总时间 字符串 计算后
-				videoPlayingTime:0,
-				bool:false,
+				contrlShow:true,//是否显示进度条
+				contrlShowTimeout:null,//显示控制条句柄
+				videoContext:null,//播放器
+				fullScreenFlag: false,//是否全屏
+				currtime:'00:00',//当前播放时间 字符串 计算后
+				druationTime:'00:00',//总时间 字符串 计算后
+				videoPlayingTime:0,//指定播放的时间位置
 				sliderValue: 0, //控制进度条slider的值，
 				updateState: false, //防止视频播放过程中导致的拖拽失效
-				palyFlag:false,
+				playing:false,//是否在播放中
+				curVideo:{
+					duration:0
+				},
+				speedListShow:false,
+				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
+				videoSpeed: 1.0, // 当前倍速:
 			};
 		},
+		computed: {
+			...mapGetters(['userInfo']),
+		},
+		created() {
+			
+		},
+		mounted() {
+			this.videoContext=uni.createVideoContext("myVideo", this);
+		
+		},
 		methods: {
-				// video_back: function (e) {
-				//     this.fullScreenFlag ? this.videoContext.requestFullScreen() : this.videoContext.exitFullScreen();
-				//     // this.fullScreenFlag ? this.bool=false : this.bool=true;
-				//     this.fullScreenFlag= !this.fullScreenFlag;
-				//  },
+				
 				// 全屏+退出全屏
-				videoAllscreen(e) { 
+				fullScreen(){
+					this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
+					// this.fullScreenFlag ? this.bool=true : this.bool=false;
+					this.fullScreenFlag=!this.fullScreenFlag;
+				},
+				onFullScreen(e) { 
 				    this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
 					// this.fullScreenFlag ? this.bool=true : this.bool=false;
 					this.fullScreenFlag=!this.fullScreenFlag;
 				},
+				
 				videoErrorCallback(e){
 					console.log(e,'播放错误');
 				},
@@ -77,14 +126,29 @@
 						return "00:00";  
 					}  
 				},
+				changeSpeed(e) {
+				  // 获取选择的倍速
+				  let value = e;
+				  this.videoSpeed = Number(value);
+				  this.videoContext.playbackRate(this.videoSpeed);
+				  studyUtil.setVideoSpeed(this.videoSpeed);
+				  this.speedListShow=false;
+				},
+				showSpeedCtrl(){
+					if(this.speedListShow){
+						this.speedListShow=false;
+					}else{
+						this.speedListShow=true;
+					}
+				},
 				//开始+暂停
 				videoOpreation() { 
-				    this.palyFlag ? this.videoContext.play() : this.videoContext.pause();
-				    this.palyFlag= !this.palyFlag;
+				    this.playing ? this.videoContext.pause() : this.videoContext.play();
+				    this.playing= !this.playing;
 				  },
 				// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
 				videoUpdate(e) {
-					let duration=this.live.liveRoomRecordList[0].duration;
+					let duration=this.curVideo.duration;
 					let sliderValue = e.detail.currentTime / duration * 100;
 					let second=sliderValue / 100 * duration;
 					if (this.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
@@ -92,8 +156,9 @@
 					}else{
 						
 					}
-					 this.druationTime = this.formatSeconds(duration);
-					 this.currtime = this.formatSeconds(second);
+					this.druationTime = this.formatSeconds(duration);
+					//console.log(this.druationTime,'this.druationTime');
+					this.currtime = this.formatSeconds(second);
 				},
 		        //拖动过程中触发的事件
 		        sliderChanging(e) {
@@ -102,7 +167,7 @@
 				},
 				// 拖动slider完成后触发
 				sliderChange(e) {
-					var duration=this.live.liveRoomRecordList[0].duration;
+					var duration=this.curVideo.duration;
 					var second=e.detail.value / 100 * duration;
 					if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
 					   this.videoContext.seek(second);
@@ -113,54 +178,93 @@
 					} 
 					else { }
 				},
+				clickVideo(){
+					// if(this.contrlShowTimeout!=null){
+					// 	window.clearTimeout(this.contrlShowTimeout);
+					// }
+					// this.contrlShow=!this.contrlShow;
+				},
+				dblclickVideo(){
+					console.log("双击了");
+				},
+				onPlayerLoad(e){
+					this.contrlShow=false;
+				},
+				onPlayerMetaLoad(e){
+					this.curVideo.duration=Number(e.detail.duration);
+					this.druationTime = this.formatSeconds(this.curVideo.duration);
+				},
+				onPlayerControlsToggle(e){
+					console.log(e,"ControlsToggle");
+				},
 				// 开始
-				contrPlay(){
+				onPlayerPlay(){
 					this.videoContext.play();
-					this.palyFlag=false;
+					this.playing=true;
+					this.contrlShow=true;
+				},
+				onPlayerPlaying(e){
+					this.playing=true;
+					this.updateState=true;
+					this.videoUpdate(e);
+					// let $this=this;
+					// if(this.contrlShow){
+					// 	this.contrlShowTimeout=window.setTimeout(function(){
+					// 		$this.contrlShow=false;
+					// 	},5000);
+					// }
 				},
 				// 暂停
-				pause() {
+				onPlayerPause() {
 					this.videoContext.pause(); //站厅播放
-					this.palyFlag=true;
+					this.playing=false;
 				},
-				stop(){
-					this.videoContext.stop(); //
+				onPlayerEnded(){
+					this.playing=false;
 				}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	 .process-container{
-	  width:100%;
-	  padding:1% 2% 1% 2%;
-	  height:60rpx;
-	  max-height:60rpx;
-	  position:absolute;
-	  bottom:40rpx;
-	  left:0;
-	  right:0;
-	  z-index:13;
-	  display:flex;
-	  align-items: center;
-	  background:rgba(59, 57, 57, 0.2);
+	.video-box{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.process-container{
+		width:100%;
+		padding:1% 2% 1% 2%;
+		height:60rpx;
+		max-height:60rpx;
+		position:absolute;
+		bottom:0rpx;
+		color:#ffffff;
+		left:0;
+		right:0;
+		z-index:99;
+		display:flex;
+		align-items: center;
+		background:rgba(59, 57, 57, 0.2);
 	}
 	.process-container image{
-	  display:inline-block;
-	  flex:1;
-	  max-width:50rpx;
-	  max-height:50rpx;
-	  text-align:center;
+		display:inline-block;
+		max-width:30rpx;
+		max-height:30rpx;
+		text-align:center;
 	}
 	.slider-container{
 	  z-index:13;
 	  height:60rpx;
 	  margin-bottom:10rpx;
 	  flex:6;
-	  max-width:58%;
+	  max-width:40%;
 	}
-	.video-controls-play{
-		width: 8%;
+	.controller-play{
+		width: 12%;
+	}
+	.controller-screen{
+		
 	}
 	.currtime{
 		color: #ffffff;
@@ -192,4 +296,46 @@
 	  width:44rpx;
 	  height:44rpx;
 	}
+	
+	.player-speed{
+		position: relative;
+		color: #e5e5e5;
+		padding: 0 0.4rem;
+		transition: color 0.3s;
+		height: 22px;
+	}
+	.btn-speed:hover .speed-control {
+	  // visibility: visible;
+	}
+	.speed-control {
+	  position: absolute;
+	  //top: 180px;
+	  transition: visibility 0.3s;
+	  transform: translate(-50%, -100%);
+	}
+	.speed-control .speed-control-list {
+	  list-style: none;
+	  color: #e5e5e5;
+	  width: 50px;
+	  font-size: 12px;
+	  text-align: left;
+	  padding: 0px 0px 0px 5px;
+	  margin: 0;
+	  overflow: hidden;
+	  border-radius: 4px;
+	  background: rgba(21, 21, 21, 0.8);
+	}
+	.speed-control .speed-control-list .li {
+	  position: relative;
+	  display: block;
+	  height: 25px;
+	  line-height: 25px;
+	}
+	.speed-control .speed-control-list .li:hover {
+	  color: #fff;
+	  background: rgba(99, 99, 99, 0.8);
+	}
+	.speed-control .speed-control-list .li.current {
+	  color: var(--primaryColor);
+	}
 </style>
diff --git a/pages/study/videoTest.vue b/pages/study/videoTest.vue
index a26a0fa..1ff3db6 100644
--- a/pages/study/videoTest.vue
+++ b/pages/study/videoTest.vue
@@ -21,7 +21,7 @@
 	export default{
 		data(){
 			return {
-				fileUrl:'http:/127.0.0.1:9090/cdn/upload/course/2022/8/1013883711839379456.mp4',
+				fileUrl:'/static/temp/test.mp4',
 				title:'测试播放',
 				author:'',
 			}
@@ -41,16 +41,16 @@
 				this.author='作者信息';
 			},
 			videoPlay(){
-				console.log('audioPlay');
+				console.log('videoPlay');
 			},
 			videoEnd(){
-				console.log('audioEnd');
+				console.log('videoEnd');
 			},
 			videoPause(){
-				console.log('audioPause');
+				console.log('videoPause');
 			},
 			videoPlaying(){
-				console.log('audioPlaying');
+				console.log('videoPlaying');
 			}
 		}
 	}