欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

H5 视频作为背景 source src改变后 循环播放的问题笔记

程序员文章站 2022-12-25 19:31:34
今天要做一个效果,但是遇到很蛋疼的问题,最后终于解决了,感谢热心帮助的朋友,于是记下笔记,万一能帮到别的朋友呢!需求: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()
 }