hengmei-two/pagesB/video/playVideo.nvue

<template>
	<div style="width:100%;overflow-x:hidden;">
		<image class="" @tap="backEv" :style="{top:statusHeight/2+'px'}" src="/static/public/videoBack.png" style="width: 33rpx;height: 33rpx;position: fixed;z-index: 10;left: 20rpx;" mode="aspectFill"></image>
		<video id="myVideo" style="width: 100%;" :style="{height:newHeight+'px'}" autoplay="true"
		:src="videoSrc" :enable-play-gesture="dans"  :poster="posterSrc"
		:controls="isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
		@play="comePlay" @pause="comePause"></video>
		<!-- 封面图 -->
		<image v-if="isPlayImg" @tap="playEv" src="/static/public/video.png" style="position: fixed;top: 50%;left: 50%;
			width: 126rpx;height: 126rpx;transform: translate(-50%, -50%);" mode="aspectFill"></image>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				newHeight:uni.getSystemInfoSync().windowHeight,
				videoSrc:'',
				isPlayImg:false,
				autoplay:true,
				videoContext:'',
				title:'',//视频的标题，全屏时在顶部展示
				posterSrc:'',//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
				isControls: false,//是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
				dans:true,//是否开启播放手势，即双击切换播放/暂停
				isCenterImg:false,//是否显示视频中间的播放按钮
				isBottomImg:true,//是否显示视频底部控制栏的播放按钮
				isFull:true//是否显示全屏按钮
			}
		},
		computed:{
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo', this)
		},
		onLoad(options) {
			// 禁用小程序分享
			this.$toolAll.tools.disableShareEv();
			this.videoSrc = options.src
			this.posterSrc = options.posterSrc
		},
		methods:{
			backEv(){
				uni.navigateBack({
					delta:1
				})
			},
			playEv(){
				this.isPlayImg = false;
				this.autoplay = false;
				this.videoContext.play();
			},
			comePlay(){//当开始/继续播放时触发play事件
				this.isControls = true;
			},
			comePause(){
				this.isPlayImg = true;
				this.isControls = false;
			}
		}
	}
</script>

<style>

</style>