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();
					  }
					}
			  },  

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐