rt_fhyx_user_miniapp/pages_course/course.vue

<template>
	<view>
		<view class="video-box" v-if="videoItem">
			<video
			id="video-content-box"
			style="width: 100%;height: 420rpx;"
			:poster="poster"
			controls
			:show-fullscreen-btn="true"
			:auto-pause-if-open-native="true"
			:auto-pause-if-navigate="true"
			:enable-progress-gesture="false" 
			:show-progress="true"
			:picture-in-picture-mode="[]"
			:show-background-playback-button="false"
			:src="videoItem.videoUrl"
			>
			</video>
		</view>
		<view class="descbox" >
			<view class="descbox-title">{{videoItem.title}}</view>
			<view class="descbox-desc">{{videoItem.description}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				poster:'',
				videoItem:{},
				videoId:null,
			}
		},
		onLoad(option) {
			if(option.videoitem){
				this.videoItem=option.videoitem ? JSON.parse(option.videoitem) : {}
				this.videoId=this.videoItem.videoId
				this.poster = this.videoItem.videoImgUrl
				uni.setNavigationBarTitle({
					title: this.videoItem && this.videoItem.title ? this.videoItem.title : ''
				});
			}
		},
		
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.video-box {
	width: 100%;
	height: 420rpx;
	overflow: hidden;
	position: relative;

	#myVideo {
		width: 100%;
		height: 100%;
	}
}
.descbox {
	padding: 20rpx 32rpx;
	margin-bottom: 20rpx;
	background-color: #fff;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #222222;
	line-height: 42rpx;
	word-break: break-word;

	&-title {
		padding: 24rpx 0;
		font-weight: 500;
		font-size: 32rpx;
	}

	&-desc {
		overflow: hidden;
		position: relative;
	}
}
</style>