im/components/videoPlayer.vue

<template>
	<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>
		</view>
	</u-overlay>
</template>

<script>
	export default {
		name:"videoPlayer",
		props:{
			previewVideoFlag:{
				type:Boolean,
				default:false,
				required:true
			},
			previewVideoSrc:{
				type:String,
				default:"",
				required:true
			}
		},
		data() {
			return {
				customMaskStyle:{
					display:"flex",
					flexDirection: "column",
					justifyContent: "center",
					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");
			}
		}
	}
</script>

<style lang="scss">
	.playBox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.quitBox{
		position: absolute;
		z-index: 9999;
		right: 5%;
		top: 10%;
		.icon{
			color: #fff;
			font-size: 32px;
			font-family: uicon-iconfont;
		}
	}
</style>