视频播放组件

components/video-player/video-player.vue

@@ -1,29 +1,29 @@
 <template>
-	<view class="video-box" @click="clickVideo">
-		<video id="myVideo" style="width: 100%;"
+	<view id="xvideoPlayer-box" class="video-box">
+		<video id="xvideoPlayer" style="width: 100%;"
 			:src="url"
 			:controls="false"
-			:enable-play-gesture="true"
+			:enable-play-gesture="false"
 			:initial-time="initPlayingTime"
 			@error="onError" 
 			@touchend="onTouchend"
 			@play="onPlay"
 			@pause="onPause"
 			@ended="onEnded"
-			@timeupdate="onPlaying"
+			@timeupdate="onTimeUpdate"
 			@fullscreenchange="onFullScreen"
 			@loadeddata="onLoad"
 			@loadedmetadata="onMetaLoad"
 			@controlstoggle="onControlsToggle"
 		></video>
-		<view v-if="contrlShow">
-			<view class="process-container">
+		<view id="xplayer-control" >
+			<view class="process-container" v-if="contrlShow">
 				<view class="controller-play">
-					<image :src="require(playing? './images/pause.png':'./images/play.png')"  @click='videoOpreation'/>
+					<image :src="require(playing? './images/pause.png':'./images/play.png')"  @click.stop='videoOpreation'/>
 				</view>
 				<view class="currtime">{{currtime}}</view>
 				<view class='slider-container'>
-					<slider :disabled="!drag" @change="sliderChange" @changing="sliderChanging" step="1" :value="sliderValue" backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12"/>
+					<slider :disabled="!drag" @change.stop="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">
@@ -44,7 +44,7 @@
 					</view>
 				</view>
 				<view class="controller-screen">
-					<image :src="require(fullScreenFlag? './images/back.png':'./images/full.png')"  @click='fullScreen'/>
+					<image :src="require(fullScreenFlag? './images/back.png':'./images/full.png')"  @click.stop='fullScreen'/>
 				</view>
 			</view>
 		</view>
@@ -59,6 +59,10 @@
 				type: String,
 				require: true
 			},
+			watermark:{
+				type: Boolean,
+				default: true
+			},
 			name:{
 				type: String,
 				default: ''
@@ -74,7 +78,7 @@
 		},
 		data() {
 			return {
-				contrlShow:true,//是否显示进度条
+				contrlShow:false,//是否显示控制条
 				contrlShowTimeout:null,//显示控制条句柄
 				videoContext:null,//播放器
 				fullScreenFlag: false,//是否全屏
@@ -98,7 +102,7 @@
 		},
 		watch:{
 			url(newVal,oldVal){
-				this.videoContext.pause();
+				this.videoContext.stop();
 				this.playing=false;
 			},
 			inittime(newVal,oldVal){
@@ -107,14 +111,18 @@
 		},
 		mounted() {
 			this.initPlayingTime=this.inittime;
-			this.videoContext=uni.createVideoContext("myVideo", this);
+			this.videoContext=uni.createVideoContext("xvideoPlayer", this);
 		},
 		methods: {
 				// 全屏+退出全屏
 				fullScreen(){
-					this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
-					// this.fullScreenFlag ? this.bool=true : this.bool=false;
-					this.fullScreenFlag=!this.fullScreenFlag;
+					if(this.fullScreenFlag){
+						this.videoContext.exitFullScreen();
+						this.fullScreenFlag=false;
+					}else{
+						this.videoContext.requestFullScreen();
+						this.fullScreenFlag=true;
+					}
 				},
 				// 根据秒获取时间
 				formatSeconds(a) {
@@ -182,13 +190,47 @@
 					   this.currtime = this.formatSeconds(second);
 					}
 				},
-				clickVideo(){
-					// if(this.contrlShowTimeout!=null){
-					// 	window.clearTimeout(this.contrlShowTimeout);
-					// }
-					// this.contrlShow=!this.contrlShow;
-				},
 				onFullScreen(e) {
+					this.fullScreenFlag=e.detail.fullScreen;
+					let divId='videowatermark';//水印
+					let full=e.detail.fullScreen;
+					let divControlId='xplayer-control';
+					let box=document.getElementById('xvideoPlayer-box');
+					let control=document.getElementById(divControlId);
+					let $this=this;
+					setTimeout(() => {
+						var div = document.getElementById("xvideoPlayer");
+						var div1 = div.firstChild;
+						//水印
+						if(full){
+							if($this.watermark){
+								var div3 = document.createElement("div");
+								div3.id =divId;
+								div3.setAttribute("class", "fullmark");
+								div3.innerHTML='';
+								for(var i=0;i<4;i++){
+									div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+$this.userInfo.name+$this.userInfo.code+'</div>';
+								}
+								div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
+								div1.appendChild(div3);
+								
+							}
+							//添加控制条
+							div1.appendChild(control);
+						}else{
+							var hasControlDiv=div1.querySelector("#"+divControlId);
+							if(hasControlDiv){
+								box.appendChild(hasControlDiv);
+							}
+							if($this.watermark){
+								var markDiv=div1.querySelector("#"+divId);
+								if(markDiv){
+									div1.removeChild(markDiv);
+								}
+							}
+						}
+						
+					},200);
 					this.$emit('fullscreenchange',e);
 				    //this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen();
 					// this.fullScreenFlag ? this.bool=true : this.bool=false;
@@ -199,6 +241,16 @@
 					this.$emit('error',e);
 				},
 				onTouchend(e){
+					if(this.contrlShowTimeout!=null){
+						window.clearTimeout(this.contrlShowTimeout);
+					}
+					if(!this.fullScreenFlag){
+						this.contrlShow=!this.contrlShow;
+					}else{
+						if(!this.contrlShow){
+							this.contrlShow=show;
+						}
+					}
 					// this.onPlayerPause()
 					// this.touchNum ++
 					// let $this=this;
@@ -222,6 +274,7 @@
 				onMetaLoad(e){
 					this.curVideo.duration=Number(e.detail.duration);
 					this.druationTime = this.formatSeconds(this.curVideo.duration);
+					this.contrlShow=true;
 					this.$emit('loadedmetadata',e);
 				},
 				onControlsToggle(e){
@@ -231,19 +284,17 @@
 				onPlay(){
 					this.videoContext.play();
 					this.playing=true;
-					//this.contrlShow=true;
-					// let $this=this;
-					// if(this.contrlShow){
-					// 	this.contrlShowTimeout=window.setTimeout(function(){
-					// 		$this.contrlShow=false;
-					// 	},5000);
-					// }
+					let $this=this;
+					if(this.contrlShow){
+						this.contrlShowTimeout=window.setTimeout(function(){
+							$this.contrlShow=false;
+						},5000);
+					}
 					this.$emit('play')
 				},
-				onPlaying(e){
-					this.playing=true;
+				onTimeUpdate(e){
 					this.videoUpdate(e);
-					this.$emit('playing',e)
+					this.$emit('timeupdate',e)
 				},
 				onPause() {
 					this.playing=false;
@@ -263,6 +314,12 @@
 		height: 100%;
 		position: relative;
 	}
+	.screen{
+		position: relative;
+	}
+	.screen-full{
+		position:static;
+	}
 	.process-container{
 		width:100%;
 		padding:1% 2% 1% 2%;
@@ -279,7 +336,6 @@
 		background:rgba(59, 57, 57, 0.2);
 	}
 	.process-container image{
-		display:inline-block;
 		max-width:30rpx;
 		max-height:30rpx;
 		text-align:center;
@@ -289,13 +345,13 @@
 	  height:60rpx;
 	  margin-bottom:10rpx;
 	  flex:6;
-	  max-width:40%;
+	  max-width:50%;
 	}
 	.controller-play{
-		width: 12%;
+		width: 8%;
 	}
 	.controller-screen{
-		
+		width: 10%;
 	}
 	.currtime{
 		color: #ffffff;
@@ -313,21 +369,6 @@
 		line-height: 60rpx;
 		text-align: center;
 	}
-	.video_back{
-	  display:block;
-	  width:60rpx;
-	  height:60rpx;
-	  left:5rpx;
-	  top:15rpx;
-	  position:absolute;
-	  text-align:center;
-	  z-index:19;
-	}
-	.video_back image{
-	  width:44rpx;
-	  height:44rpx;
-	}
-	
 	.player-speed{
 		position: relative;
 		color: #e5e5e5;

pages/study/courseStudy.vue

@@ -9,35 +9,18 @@
 			 	<view v-if="curContent.contentType==10" style="background-color: #000000;">
 			 		<!--视频-->
 					<view style="position: relative;">
-						<video id="myVideo" 
-			 			    @touchend="doubleClickVideo"
-			 				:src="blobUrl"
+						<video-player
+							url="/static/temp/test.mp4"
 							controls
 							:enable-play-gesture="true"
-			 				:initial-time="curContent.lastStudyTime"
+							:inittime="curContent.lastStudyTime"
 							@play="onPlayerPlay"
 							@pause="onPlayerPause" 
 							@ended="onPlayerEnded"
 							@timeupdate="onPlayerPlaying"
 							@fullscreenchange="onFullScreen"
 							style="width: 100%; object-fit: fill">
-			 			</video>
-			 			<!--倍速度-->
-			 			<view id="myVideoSpeed" class="player-controls-btn cursor-pointer 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>
+						></video-player>
 						<view class="player-box" v-if="playerBoxShow">
 			 				  <view class="player-praise">
 			 					<view @click="praiseContent" style="cursor: pointer;">
@@ -1335,41 +1318,7 @@
 			},
 			onFullScreen(e){
 				//console.log(e,'e');
-				let full=e.detail.fullScreen;
-				let divId='videowatermark';
-				setTimeout(() => {
-					var div = document.getElementById('myVideo')
-					var div1 = div.firstChild;
-					var speedDiv=div1.querySelector("#myVideoSpeed");
-					if(full){
-						var div3 = document.createElement("div");
-					    div3.id =divId;
-					    div3.setAttribute("class", "fullmark");
-						div3.innerHTML='';
-					    // 从父组件传过来的水印内容
-					    //div3.innerText =this.userInfo.name+this.userInfo.code;
-						for(var i=0;i<4;i++){
-							div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.code+'</div>';
-						}
 				
-					    div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
-					    //console.log(div3,'div3');
-						div1.appendChild(div3);
-						if(!speedDiv){
-							var speedDiv=document.getElementById('myVideoSpeed');
-							div1.appendChild(speedDiv)
-						}
-					}else{
-						var markDiv=div1.querySelector("#"+divId);
-						//var speedDiv=div1.querySelector("#myVideoSpeed");
-						if(markDiv){
-							div1.removeChild(markDiv);
-						}
-						if(speedDiv){
-							//div1.removeChild(speedDiv);
-						}
-					}
-				 }, 200);
 			},
 			onPlayerPlay(){
 				this.isPlaying = true;

pages/study/videoTest.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<view>
+		<view v-if="show">
 			<video-player 
 				:url="fileUrl" 
 				:name="title" 
@@ -8,14 +8,22 @@
 				:drag="true"
 				@play="videoPlay"
 				@pause="videoPause"
-				@playing="videoPlaying"
+				@timeupdate="videoPlaying"
 				@ended="videoEnd"
 				@fullscreenchange="videoScreen">
 			</video-player>
 		</view>
-		<!-- <view style="padding-top: 30px;display: flex;justify-content: center;">
-			<button type="primary" @click="changeSrc">切换测试</button>
-		</view> -->
+		<view style="padding-top: 30px;display: flex;justify-content: center;">
+			<button type="default" @click="loadVideo()">加载</button>
+			<button type="primary" @click="changeSrc()">切换测试</button>
+		</view>
+		<view>
+			<video style="width: 100%;"
+				:src="fileUrl"
+				:controls="true"
+				@fullscreenchange="videoScreen"
+			></video>
+		</view>
 	</view>
 </template>
 
@@ -23,25 +31,28 @@
 	export default{
 		data(){
 			return {
-				fileUrl:'/static/temp/test.mp4',
-				initTime:20,
-				title:'测试播放',
+				show:false,
+				fileUrl:'',
+				initTime:0,
+				title:'',
 				author:'',
 			}
 		},
 		mounted() {
-			//this.startAudioPlay();
+			this.loadVideo();
 		},
 		methods:{
-			startAudioPlay(){
-				this.fileUrl='http://localhost:9090/cdn/upload/course/2022/5/979321410778959872.mp3';
+			loadVideo(){
+				//this.fileUrl='http://localhost:9090/cdn/upload/course/2022/5/979321410778959872.mp3';
+				this.fileUrl='/static/temp/test.mp4';
 				this.title='标题内容111';
-				this.author='作者信息';
+				this.initTime=40;
+				this.show=true;
 			},
 			changeSrc(){
-				this.fileUrl='http://localhost:9090/cdn/upload/course/2022/4/964853684964700160.mp3';
-				this.title='标题内容22';
-				this.author='作者信息';
+				this.fileUrl='/static/temp/video.mp4';
+				this.title='标题内容221';
+				this.initTime=20
 			},
 			videoPlay(){
 				console.log('videoPlay');