视频播放组件

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;