H5 视频作为背景 source src改变后 循环播放的问题笔记
程序员文章站
2022-05-13 21:54:48
今天要做一个效果,但是遇到很蛋疼的问题,最后终于解决了,感谢热心帮助的朋友,于是记下笔记,万一能帮到别的朋友呢!需求:video作为网页背景,但是要定时更换video的视频注意点:1、html的video的source替换src后,要执行load方法和play方法才能播放,否则虽然src换了,但是并 ......
今天要做一个效果,但是遇到很蛋疼的问题,最后终于解决了,感谢热心帮助的朋友,于是记下笔记,万一能帮到别的朋友呢!
需求:video作为网页背景,但是要定时更换video的视频
注意点:1、html的video的source替换src后,要执行load方法和play方法才能播放,否则虽然src换了,但是并不播放 (感谢 folrvu 的指导 )
html部分:
<video :style="fixStyle" autoplay loop ref="videobox"> <source :src="bgselect.src" :type="bgselect.type"/> </video>
js部分:
bg.video作为要循环的视频列表
bgselect作为已选择的视频源
data () { return { fixStyle: '', bg: { image: '/static/images/bg.jpg', video: [ { src :'/static/video/bg4.mp4', type: 'video/mp4' }, { src :'/static/video/bg3.webm', type: 'video/webm' }, { src :'/static/video/bg2.webm', type: 'video/webm' } ] }, bgselect: { src :'/static/video/bg1.webm', type: 'video/webm' } } },
channelbg 用于切换bgselect的内容
重点就是 替换了source的src以后,要进行load操作和play操作,否则不生效
(我这里直接改成了0,作为测试 -- this.bg.video[0])
methods: { channelbg: function () { var index = 0; setInterval(() => { this.bgselect = this.bg.video[0] this.$refs.videobox.load(); this.$refs.videobox.play(); console.log(this.bgselect) },2000) }, },
然后直接调用即可:
mounted: function() { this.channelbg() }
上一篇: 讲解wpe抓包,封包
下一篇: mysql 开发基础系列4