JavaScript教程之H5 视频作为背景 source src改变后循

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之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'

                }

            }

        },

栏目列表

首页 > 网站开发 > JavaScript >

JavaScript教程之H5 视频作为背景 source src改变后 循

JavaScript教程之H5 视频作为背景 source src改变后循