H5 視頻作為背景 source 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()
 }