siyu_app/pages/course/video/play.vue

<template>
	<view class="view" v-if="showView">

		<!-- #ifdef APP-PLUS -->
		<video class="video" v-if="showView" :initial-time="currentTime" :src="videoUrl" :controls="false" :show-center-play-btn="false" autoplay id="video"></video>
		<!-- #endif -->

		<cover-view class="top es es-ac es-h-100" :style="'top:'+top+'px'">
			<cover-view class="es-w-40 es-h-60" @tap="close()"></cover-view>
			<cover-image style="background-color: red;" mode="aspectFit" class="es-w-18 es-h-31" src="/static/images/other/ret-white.png" 
				@tap="close()"></cover-image>
			<cover-view class="es-w-30 es-h-60" @tap="close()"></cover-view>	
			<cover-view class="es-c-white es-fw-500 es-fs-34 es-mb-4 es-h-44" style="line-height: 1em;">名字</cover-view>
		</cover-view>
		
		<view class="center es es-ac es-pc" v-if="showToolBar">
			<cover-image class="es-icon-52 es-icon-play-last"
				src="/static/images/other/video/play-last.png"></cover-image>
			<cover-image class="es-icon-88 es-icon-play-stop es-ml-30 es-mr-30"
				src="/static/images/other/video/play-stop.png"></cover-image>
			<cover-image class="es-icon-52 es-icon-play-next"
				src="/static/images/other/video/play-next.png"></cover-image>
		</view>
		
		<cover-view class="bottom" >
			<cover-view class="es-view-w-x">
				<cover-view class="es es-fs-22 es-c-white">
					<cover-view class="es-ml-30">00:37</cover-view>
					<cover-view class="es-p-r load-con es-f1 es-h-30 es-ml-12 es-mr-12">
						<cover-view class="es es-ac line1">
							<cover-view class="es-h-4 es-f1 line-bc es-br"></cover-view>
						</cover-view>
						<cover-view class="es es-ac line2">
							<cover-view class="es-h-4 es-br line-bc es-p-r" :style="'width: '+video.percent+'%;'"></cover-view>
						</cover-view>
						<cover-view class="es es-ac line3">
							<cover-view :style="'width: '+video.percent+'%;'"></cover-view>
							<cover-view class="white-bloack"></cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="es-mr-30">00:37</cover-view>
				</cover-view>
				<cover-view class="es-pt-40 es es-fs-22 es-c-white">
					<cover-view class="es es-ver es-ac es-pc es-mr-50 es-ml-30">
						<cover-image class="es-icon-41" src="/static/images/other/video/1.png"></cover-image>
						<cover-view class="">写评论</cover-view>
					</cover-view>
					<cover-view class="es es-ver es-ac es-pc es-mr-50">
						<cover-image class="es-icon-41" src="/static/images/other/video/2.png"></cover-image>
						<cover-view class="">收藏</cover-view>
					</cover-view>
					<cover-view class="es es-ver es-ac es-pc es-mr-50">
						<cover-image class="es-icon-41" src="/static/images/other/video/3.png"></cover-image>
						<cover-view class="">分享</cover-view>
					</cover-view>
					<cover-view class="es es-ac es-pc es-mr-50">
						<cover-view class="es-icon-33 es-w-63 es-icon-play-dan"></cover-view>
					</cover-view>
					<cover-view class="es es-ac">
						<cover-view class="es-f1 es es-ac es-h-40 es-bc-white es-br" style="width: 400rpx;">
							<cover-view class="es-c-99 es-ml-30">发个弹幕见证下</cover-view>
						</cover-view>
					</cover-view>
					<cover-view class="es-f1"></cover-view>
					<cover-view class="es-fs-28 es es-ac es-mr-30">
						<cover-view>选集</cover-view>
						<cover-view class="es-ml-30">4K·全网独家</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="es-pt-41 es-auto-bottom"></cover-view>
			</cover-view>
		</cover-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showView: false,
				top: 23,
				video: {
					percent: 10,
				},
                videoUrl:'',
				status: 0,
				course:{},
				catalog:{},
				showToolBar:false,
				currentTime:0,
			}
		},
		onLoad(options) {

			console.log('qxj videoUrl', options.videoUrl);
            this.videoUrl=options.videoUrl;
			this.currentTime=options.currentTime;
			this.catalogIdx=options.catalogIdx;
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.safeArea.top/2;
					console.log("qxj top:"+this.top);
				}
			});

			this.spin(1);
			//video
			// setTimeout(e=>{
			// 	uni.createVideoContext('video',this).play()
			// },500)
		},
		onShow: function() {
         
		},
		onReady(){
			this.adjustLayout();
		},
		onUnload: function() {

		},
		methods: {
			// 1-横屏 2-恢复
			spin: function(type = 1) {
				if (type == 1) {
					//满足条件转换为横屏
					setTimeout(e => {
						//#ifdef APP-PLUS
						 plus.navigator.setFullscreen(true)
						 plus.screen.lockOrientation("landscape-primary");
						 this.status = 1;
						//#endif
					})
				} else {
					//#ifdef APP-PLUS
					//   plus.navigator.setFullscreen(false)
					//   plus.screen.lockOrientation('portrait-primary');
					//#endif
				}
			},
			close: function() {
				// uni.navigateBack();
				console.log("qxj close");
				this.showView = false;
				this.spin(2);
				uni.redirectTo({
					url: '/pages/course/video/playClose'
				})
			},
			adjustLayout() {
				 this.showView=true;
				 const query = uni.createSelectorQuery().in(this);
				 query.select('.view').boundingClientRect((data) => {
					if (data) {
						console.log('Container height:', data.height);
						
					}
				 }).exec();
			},
  
		}
	}
</script>
<style>
	page {
		background-color: #000;
	}
	
	.view {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #000;
		/* background-color: yellow; */
	}

	.video {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: yellow;
	}

	.top {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.top image {
		width: 18rpx;
		height: 31rpx;
		margin-left: 30rpx;
	}

	.bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 2;
		/* background-color: red; */
	}

	.load-con .line1,.load-con .line2,.load-con .line3 {
		position: absolute;
		left: 0;
		top: 0;
		height: 30rpx;
		width: 100%;
	}

	.load-con .line1 .line-bc {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.load-con .line2 .line-bc {
		background-color: #FC8957;
	}

	.white-bloack {
		background-color: #F45510;
		width: 24rpx;
		height: 10rpx;
		margin-left: -12rpx;
		border-radius: 100rpx;
		box-shadow: 2px 6px 10px 0px rgba(153, 153, 153, 0.22);
	}


	.center {
		width: 100%;
		height: 100%;
		position: fixed;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}


	.es-icon-play-1 {
		background-image: url(/static/images/other/video/1.png);
	}

	.es-icon-play-2 {
		background-image: url(/static/images/other/video/2.png);
	}

	.es-icon-play-3 {
		background-image: url(/static/images/other/video/3.png);
	}

	.es-icon-play-last {
		background-image: url(/static/images/other/video/play-last.png);
	}

	.es-icon-play-stop {
		background-image: url(/static/images/other/video/play-stop.png);
	}

	.es-icon-play-next {
		background-image: url(/static/images/other/video/play-next.png);
	}

	.es-icon-play-dan {
		background-image: url(/static/images/other/video/dan.png);
	}
</style>