uniapp开发小程序时遇到多个视频无法自动只播放一个的问题解决

笔者也是刚开始接触uniapp开发，如有错漏，欢迎讨论

笔者需要的布局是两个连续的video，不过我试了一下三个视频组件也可以做到只播放其中一个视频，代码如下：

				<video src="txt1.mp4" 
					id="myVideo1"
					autoplay 
					muted
					loop
					controls
					show-mute-btn
					auto-pause-if-open-native
					poster="txt1.png"
					auto-pause-if-navigate
					style="width: 100%; height: 250rpx;"
					@play="videoPlayHandle('myVideo1')">
				</video>
				
				<div class="video-gap"></div>
				
				<video src="txt2.mp4"
					id="myVideo2"
					muted
					loop
					controls
					show-mute-btn
					auto-pause-if-open-native
					auto-pause-if-navigate
					poster="txt2.png"
					style="width: 100%; height: 250rpx;"
					@play="videoPlayHandle('myVideo2')">
				</video>
				

videoPlayHandle方法代码如下：

methods{
			videoPlayHandle(id){
				let newVideo = uni.createVideoContext(id,this);
				console.log("newvideo:"+JSON.stringify(newVideo));
				newVideo.id = id;
				if (!this.video) {
					this.video = newVideo;
					this.video.play();
					console.log(JSON.stringify(this.video)+"播放");
					return;
				}
				if (this.video.id !== newVideo.id) {
					console.log("this.video.id = "+this.video.id + "  newVideo.id = " + newVideo.id);
					console.log("切换视频主体");
					newVideo.play();
					console.log("目前视频主体播放");
					this.video.pause();
					console.log("之前视频主体暂停");
					this.video = newVideo;
					console.log("播放主体切换");
				}
			},
}

一开始uni.createVideoContext()中只写了id，没有后面的this，所以明明下面的log输出都是对的，但是.pause一直无法实现，以后使用的时候uni.createVideoContext需要注意。

---

补充一个代码中看到的将video保存在数组中的只同时播放一个video的方法：

<!--视频-->
			<view v-else-if="n.name=='video'">
				<view v-if="(!loadVideo||n.lazyLoad)&&!(controls[n.attrs.id]&&controls[n.attrs.id].play)" :id="n.attrs.id" :class="'_video '+(n.attrs.class||'')"
				 :style="n.attrs.style" @tap="_loadVideo" />
				<video v-else :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||(controls[n.attrs.id]&&controls[n.attrs.id].play)"
				 :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[(controls[n.attrs.id]&&controls[n.attrs.id].index)||0]"
				 :unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" data-from="video" data-source="source" @error="error" @play="play" />
			</view>



/*play方法*/

method{
    // #ifndef MP-ALIPAY
			play(e) {
				if (this.top.videoContexts.length > 1 && this.top.autopause)
					for (var i = this.top.videoContexts.length; i--;)
						if (this.top.videoContexts[i].id != e.currentTarget.dataset.id)
							this.top.videoContexts[i].pause();
			},
			// #endif
}