html5 动态背景-Web后端入门实践：HTML5在首页实现动态视频背景

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

您想实现动态视频作为您的主页背景吗？ 快来一起学习吧，本文将带你实现H5动态视频背景；

首先，在网上找一个清晰的视频下载下来，最好是MP4格式的； 下载后，我们新建一个html文件来写入代码：

html代码：

<video id="v1" autoplay loop muted>
    

用video标签包裹起来，source代表源文件，autoplay属性代表手动播放，loop代表循环播放，muted代表静音播放；

如果不添加自动播放属性html5 动态背景，手动播放很难，页面会卡住显示；

CSS代码：

*{  
    margin: 0px;  
    padding: 0px;  
}  
video{  
    position: fixed;  
    right: 0px;  
    bottom: 0px;  
    min-width: 100%;  
    min-height: 100%;  
    height: auto;  
    width: auto;  
    /*加滤镜*/
    /*filter: blur(15px); //背景模糊设置 */
    /*-webkit-filter: grayscale(100%);*/  
    /*filter:grayscale(100%); //背景灰度设置*/  
    z-index:-11
}  
source{  
    min-width: 100%;  
    min-height: 100%;  
    height: auto;  
    width: auto;  
}

css代码主要用于定位和放大，达到全屏播放的效果。 主要用于设置视频的宽度和高度。 不要忘记给 z-index 赋予一个值，以便它可以放置在顶部。 只要大于0就可以了。html5 动态背景，没有效果;

这样我们的动态视频背景就完成了。 如果我们想设置播放速率，可以添加js代码（video标签加id="v1"属性）：

var video= document.getElementById(‘v1‘);
video.playbackRate = 1.5;

那么如果我们想给页面添加内容怎么办呢？

    
123465
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

是的，添加到video标签外面，然后我们的渲染就变成这样了（由于博客对图片大小有限制，所以截图时间并不长）