13

components/videoPlayer.vue

@@ -1,18 +1,27 @@
 <template>
-	<view>
-		<u-mask :show="previewVideoFlag"  :custom-style="customMaskStyle">
-			<view @tap.stop class="playBox"  :style="'height:'+(winHeight/10*9)+'px;width:'+(winWidth-20)+'px;'">
-					 <video :style="'height:'+(winHeight/10*8)+'px;width:'+(winWidth-20)+'px'"
-							:controls="true" :show-fullscreen-btn="false"  :autoplay="true" 
-							:src="previewVideoSrc"  @ended="quitPlay()">
-						<u-button hover-class="none"  @click="quitPlay()">关闭</u-button>	
-					</video>
-					<view class="quitBox">
-						<u-button hover-class="none"  @click="quitPlay()">关闭</u-button>
-					</view>
+	<u-overlay 
+		v-if="previewVideoFlag"
+		:show="previewVideoFlag" 
+		opacity="1"
+		:custom-style="customMaskStyle">
+		<view @tap.stop 
+			class="playBox" 
+			style="height:100vh;width:100vw;">
+			 <video 
+				v-if="previewVideoFlag" 
+				:style="{height:videoHeight+'vw',width:'100vw'}"
+				:controls="true" 
+				:show-fullscreen-btn="false" 
+				:autoplay="true" 
+				:src="previewVideoSrc"  
+				@ended="play_end">
+			</video>
+			<view class="quitBox" @click="quitPlay">
+				<u-icon name="close-circle" color="#FFF" size="32"></u-icon>
+				<cover-view class="icon"></cover-view>
 			</view>
-		</u-mask>
-	</view>
+		</view>
+	</u-overlay>
 </template>
 
 <script>
@@ -36,22 +45,40 @@
 					display:"flex",
 					flexDirection: "column",
 					justifyContent: "center",
-					alignItems: "center",
-					//paddingTop:'100rpx',
-					border:'1px solid red',
-					width:"100%",
-					height:"100%",
+					alignItems: "center"
 				},
+				videoHeight:100,
 				winHeight:0,
 				winWidth:0
 			};
 		},
+		watch:{
+			previewVideoSrc(nv,ov){
+				const _this = this;
+				console.log(nv,ov);
+				if(nv && nv != ov){
+					uni.getVideoInfo({
+						src:nv,
+						success(res) {
+							_this.videoHeight = res.width/ res.height * 100;
+						},
+						complete(res) {
+							console.log(res);
+						}
+					})
+				}
+			}
+		},
 		created:function(){
 			this.winHeight=this.$u.sys().windowHeight;
 			this.winWidth=this.$u.sys().windowWidth;
 		},
 		methods:{
+			play_end(res){
+				console.log(res);
+			},
 			quitPlay:function(){
+				console.log('quit');
 				this.$emit("quitPlay");
 			}
 		}
@@ -60,12 +87,21 @@
 
 <style lang="scss">
 	.playBox{
-		 display: flex;
-		 flex-direction: column;
-		 justify-content: center;
-		 align-items: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: relative;
 	}
 	.quitBox{
-		width: 100%;
+		position: absolute;
+		z-index: 9999;
+		right: 5%;
+		top: 10%;
+		.icon{
+			color: #fff;
+			font-size: 32px;
+			font-family: uicon-iconfont;
+		}
 	}
 </style>