vue一个页面多个视频,实现单个播放
vue一个页面多个视频,实现单个播放html<div id="app" style="width: 992px;"><divv-for=" i in list" style="margin:auto;width: 992px;" >//通过后台传过来的list<div style="width: 544px;margin: auto"><video :sr
·
vue一个页面多个视频,实现单个播放
html
<div id="app" style="width: 992px;">
<div v-for=" i in list" style="margin:auto;width: 992px;" >//通过后台传过来的list
<div style="width: 544px;margin: auto">
<video :src="videoSrc" controls :id="i" class="video" style="" @play="playVideo(i)" @ended="end(i)" >您的浏览器不支持 video 视屏播放。</video>//对应得各个时件
paly播放,ended结束
</div>
</div>
</div>
</div>
js
<script type="">
var vm = new Vue({
el:"#app",
data:function () {
return{
list:[1,2,3],//假设这个是后台传过来的数据
videoSrc: 'test.mp4',
ind:''
}
},
mounted:function () {//渲染完成执行
var self=this
},
methods: {
// 一个视频播放完后的操作,我的业务是转跳到对应得页面,id,我用后台数据库里的id,并赋值给前端id,这样便不会重复id
end: function (i) {
var self=this
console.log(i)
window.location.href = "index?id=" + i;
},
// 这个是播放事件,单页面有一个视频在播放,点击另一个就结束。
playVideo: function (j) {
var self=this
// ind是记录上次id,这次传过来的值如果不等上次的,肯定不等
if(j!= self.ind){
// 通过id获取,是获取上次的id,也就是正在播放的id
var video1=document.getElementById(self.ind);
console.log(j)
// 第一个视频vido一定为空,所以要判断,否则程序出错
if(video1==null){
console.log("没有存在上次播放")
}
else{
// 暂停上次的播放,开始这次的播放
video1.pause();
}
// 记录这次的id,为下次做判断
self.ind =j
}
}
}
})
</script>
由于不是前端,什么插件啊之类的,都不会用,所以就自己乱写一下,不对还希望指出,谢谢
更多推荐
已为社区贡献1条内容
所有评论(0)