siyu_app/pages/course/video/play2.vue

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


	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				video: {
					percent: 10,
				}

			}
		},
		onLoad(options) {
			console.log('play2',options);
			
			this.spin(1);
			setTimeout(e=>{
				uni.$emit('initVideo')
			},150)

		},
		onUnload: function() {


		},
		methods: {
			// 1-横屏 2-恢复
			spin:function(type=1){
				if(type == 1)
				{
					//满足条件转换为横屏
					setTimeout(e => {
						//#ifdef APP-PLUS
						plus.screen.lockOrientation("landscape-primary");
						//#endif
					
					
						uni.getSystemInfo({
							success: (res) => {
								this.top = res.safeArea.top;
							}
						});
					})
				}else{
					//#ifdef APP-PLUS
					plus.screen.lockOrientation('portrait-primary');
					//#endif
				}
				
			},
			close: function() {
				console.log('关闭页面');
				// uni.navigateBack();
				// uni.navigateTo({
				// 	url:'/pages/course/video/playClose'
				// })
				this.view = false;
				uni.redirectTo({
					url: '/pages/course/video/playClose'
				})
			}


		}
	}
</script>
<style>
	page {
		background-color: rgba(0, 0, 0, 0);
	}


	.view {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		/* background-color: #000; */
	}

	video {
		width: 100%;
		height: 100%;
	}

	.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>view {
		position: absolute;
		left: 0;
		top: 0;
		height: 30rpx;
		width: 100%;
	}

	.load-con>view:nth-child(1)>view {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.load-con>view:nth-child(2)>view {
		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>