liedou_uniapp/pages/optimization/videoPlayer....

<template>
	<view class="video-wrap">
		<image class="filterBgImg" :src="video_info.imageUrl"></image>
		<video class="myVideo" :style="{height: `${100 * video_info.high / video_info.width}vw`}" @click="click" @play="changePlay" :id="'myVideo'+ goods_id" :poster="video_info.imageUrl" :src="video_info.playUrl" :loop="true"></video>
	</view>
</template>

<script>
	export default{
		props: ['video_info', 'goods_id', 'imgSwiperGoodsId'],
		data(){
			return{
				play: false
			}
		},
		watch:{
			imgSwiperGoodsId(){ // imgSwiperGoodsId 与 goods-id一致 则播放视频，否则关闭视频
				if ( this.imgSwiperGoodsId == this.goods_id) {
					this.playVideo()
				} else {
					this.pauseVideo()
				}
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo" + this.goods_id, this)
		},
		mounted() {
			this.videoContext = uni.createVideoContext("myVideo" + this.goods_id, this)
		},
		methods:{
			click() {
				if (!this.play) {
					this.playthis()
				} else {
					this.pauseVideo()
				}
			},
			playVideo() {
				if (this.play === false) {
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play = true
				}
			},
			pauseVideo() {
				if (this.play === true) {
					this.videoContext.pause()
					this.play = false
				}
			},
			playthis() {
				if (this.play === false) {
					this.videoContext.play()
					this.play = true
				}
			},
			changePlay() {
				this.play = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-wrap{
		width:100%;
		height:100%;
		position: relative;
		z-index:-1;
		.myVideo{
			width:100vw;
			height: 100vw;
			position: absolute;
			top:0;
			bottom:0;
			margin:auto;
		}
	}
	.filterBgImg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		filter: blur(45px)
	}
</style>