uni-app点击图片全屏播放视频

客户有点击图片播放视频的需求，实现如下代码

<template>
	<view class="content">
		<image class="logo" @click="fullScreen" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>
			<video id='video1' class="video" :src="src" autoplay="false" poster="/static/logo.png" controls="true"  :loop="true" muted="false" initial-time="" direction="-90"
				 v-show="show" ></video>
				 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'视频',
				src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3c1782e0-60ab-11eb-8ff1-d5dcf8779628.m4v",
				fil: true,
				show:false,
				list: [{
					text: '要显示的文本',
					color: '#FF0000',
					time: 9
				}]
			}
		},
		onLoad() {
			this.context = uni.createVideoContext("video1",this);
		},
		methods: {
            fullScreen() {
                this.context.requestFullScreen({
                    direction: 90
                });
				this.context.play();
            },
			onstart(e) {
				console.log("onstart:" + JSON.stringify(e));
			},
			onpause(e) {
				console.log("onpause:" + JSON.stringify(e));
			},
			onfinish(e) {
				console.log("onfinish:" + JSON.stringify(e));
			},
			onfail(e) {
				console.log("onfail:" + JSON.stringify(e));
			},
			fullscreenchange(e) {
				console.log("fullscreenchange:" + JSON.stringify(e));
			},
			waiting(e) {
				console.log("waiting:" + JSON.stringify(e));
			},
			timeupdate(e) {
				console.log("timeupdate:" + JSON.stringify(e));
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

打赏 支付宝打赏 微信打赏