uni-app 页面视频多个视频同时播放处理成一个视频播放(仅适用H5)
uni-app 一个页面出现多个视频时,播放时几个视频一起播放,这个明显是不合理的,处理方式在这里插入代码片
·
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();
}
}
},
更多推荐
已为社区贡献6条内容
所有评论(0)