scenicList.vue

<template>
	<view class="content">
		<view style="padding-top: 30rpx;">
			<block>
				<view class="item" v-if="merchantName">
					<video class="video" id="myVideo" :poster="thumbImageUrl" :src="productUrl" play-btn-position="center" 
					@error="error" object-fit="fill" @play="playVideo()">

					</video>
					<view class="title">
						<text>[ {{merchantName || ""}} ]</text>
						<view>
							<u-icon name="eye-fill" class="icon" color="#ffffff" size="40rpx"></u-icon><text style="color: #ffffff;" space>1000+</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="bottom">
			<image src="../../../static/img/vlog/icon/bottom.png"></image>
			<navigator url="../vlogface/vlogface">
				<view class="paizhao">
					<image src="../../../static/img/vlog/icon/icon_scan.png"></image>
					<view style="width: 100%;text-align: center;margin-top:10rpx;color: #FFFFFF;">获取Vlog</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productUrl: "", //视频地址
				thumbImageUrl: "", //图片地址
				merchantName: "", //景区名称
				videoContext:""
			}
		},
		onReady() { //代替 vue 里面的 mounted
			
		},
		onLoad(option) { //代替 vue 里面的 created
			this.productUrl = option.productUrl
			this.thumbImageUrl = option.thumbImageUrl
			this.merchantName = option.merchantName
		},
		methods: {
			playVideo(){
				// 获取 video 上下文 videoContext 对象
				this.videoContext = uni.createVideoContext('myVideo',this);
				// 进入全屏状态
				this.videoContext.requestFullScreen({direction:-90})
			},
			error(e) { //视频播放出错
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
		min-height: 100%;
		width: 100%;
		background-color: #192033;

		.item {
			padding: 0 10rpx;
			border-radius: 10rpx;
			background-color: #192033;
			margin-bottom: 30rpx;
			text-align: center;

			.video {
				height: 350rpx;
				border-radius: 10rpx;
				width: 100%;
			}

			.title {
				height: 60rpx;
				margin-top: 20rpx;

				text {
					float: left;
					height: 60rpx;
					line-height: 60rpx;
					color: #FFE600;
					font-weight: bold;
				}

				view {
					float: right;
					height: 60rpx;
					line-height: 60rpx;
					align-items: center;
					display: flex;
				}
			}
		}

		.bottom {
			width: 100%;
			position: fixed;
			bottom: 0;
			right: 0rpx;

			image {
				width: 100%;
				height: 100rpx;
				position: fixed;
				bottom: 0;
			}

			.paizhao {
				z-index: 1;
				position: absolute;
				bottom: 15rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					height: 160rpx;
					width: 160rpx;
					position: relative;
					top: 20rpx;
				}
			}
		}
	}
</style>