- template结构(video动态生成)
<div v-for="(item, index) in List" :key="index">
<video controls :src="item.url"></video>
</div>
-
methods 函数
vue中获取video标签集合videos,输出videos.length为0,必须使用this.$nexTickfor循环注意使用闭包或者自定义属性解决循环之后只给最后一个元素绑定了点击事件的问题
setVideo() {
let that = this
var videos = document.getElementsByTagName('video')
this.$nextTick(function () {
for (var i = 0; i <videos.length; i++) {
(function(n){
videos[n].addEventListener('play',function(){
that.pauseAll(n);
})
})(i)
}
})
},
pauseAll(index) {
var videos = document.getElementsByTagName('video')
this.$nextTick(function () {
for (var j = 0; j< videos.length; j++) {
if (j !== index){
videos[j].pause()
// videos[j].load();
}
}
})
}
- mouted 函数
mounted() {
this.setVideo()
},