dreamland/pages/dream/view/vodShort.vue

<template name="vodShort">
	<view class="swiper">
		<video
			:src="item.video"
			preload
			show-play-btn="true"
			controls="false"
			loop="true"
			:id="`video_${item.id}`"
			objectFit="fill"
			:enable-progress-gesture="false"
			@click="play"
			ref="video_url"
			play-btn-position="center"
			class="video"
			:poster="item.pic"
			@timeupdate="timeupdate">
		</video>
		
		<cover-image
		class="play" 
		@tap="play"
		src="../../../static/video/play.png"></cover-image>
	</view>
</template>

<script>
var play = false;
export default {
	name: "vodShort",
	props: {
		item : {
			type    : Object,
			value	: null
		},
	},
	methods:{
		play() {
			let video_id = this.video_list[this.current_index].video_id;
			
			if (play) {
				console.log('播放视频',`video_${video_id}`);
				this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
				this.videoCtx.play();
				this.show_play = false;
				play = false;
			} else {
				console.log('暂停视频',`video_${video_id}`);
				this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
				this.videoCtx.pause();
				this.show_play = true;
				play = true;
			}
		},
		pause() {
			let video_id = this.video_list[this.current_index].video_id;
			this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
			this.videoCtx.pause();
			this.show_play = true;
			play = true;
		},
	},
}
</script>

<style>
.swiper{
	width: 100vw;
	height: 100vh;	
	position: fixed;
	top: 0;
	left: 0;
}
.video {
	width: 100%;
	height: 100%;
	position: relative;
}
.play{
	position: absolute;
	width: 20vw;
	height: 20vw;
	left: 40vw;
	top: 40vh;
	opacity: 0.5;
}
</style>