uni-app 页面视频多个视频同时播放处理成一个视频播放（仅适用H5）

uni-app 一个页面出现多个视频时，播放时几个视频一起播放，这个明显是不合理的，处理方式

 <view  v-for="(item,index) in list" :key='index'>
			<video :src="item.src" controls
			 :data-id="item.id"
			 style="width: 100%;"
			 :ref='item.id'
			 @play="saveplay"
			 ></video>
	</view>
//return 里面的值 list:[{src:'http://edge.ivideo.sina.com.cn/34667689103.mp4?KID=sina,viask&Expires=1596816000&ssig=oeEgfQQWiZ&reqid=',poster:'',id:'index0'},{src:'http://flv3.people.com.cn/dev1/mvideo/vodfiles/2020/07/29/ee0197afa92d770f46aa57b733ac0974_c.mp4',poster:'',id:'index1'},{src:'http://flv3.people.com.cn/dev1/mvideo/vodfiles/2020/07/29/ee0197afa92d770f46aa57b733ac0974_c.mp4',poster:'',id:'index1'}]
//methods
 saveplay(e){  
				    var self = this;
					// 获取当前视频id
					let currentId = e.target.dataset.id;
					// 获取json对象并遍历, 停止非当前视频
					let trailer = this.list;
					for (let i = 0; i < trailer.length; i++) {
					  let temp = trailer[i].id
					  if (temp !== currentId) {
						   this.$refs[temp][0].pause();
					  }
					}
			  },