web前端入门到实战：HTML5实现首页动态视频背景

你想实现动态视频做为背景的首页吗？来，一块儿来学习，本文将带你一块儿实现H5动态视频背景；

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

html代码：

<video id="v1" autoplay loop muted>
    <source src="./video2.mp4" type="video/mp4"  />
</video>

一个video标签包裹着，source表明来源文件，autoplay属性是自动播放，loop表明循环播放，muted表明无声播放；

若是不加入autoplay属性是没法自动播放的，页面将会黑屏展现；

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代码主要是进行定位和放大达到全屏播放的效果，主要是对video进行宽高之类的设置，还有别忘了要给z-index给个值，让放置在底部，只要小于0均可以，没有影响；

就这样咱们的动态视频背景就完成了，若是想设置播放速度，咱们能够添加js代码（video标签加上id=“v1”属性）：

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

那么若是咱们想要添加内容到页面上怎么办呢？

<video id="v1" autoplay loop muted>
       <source src="./video2.mp4" type="video/mp4"  />
</video>    
<h1 style="color:white">123465</h1>
学习Q-q-u-n： 784783012 ，分享学习的方法和须要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

是的，在video标签外部添加，而后咱们的效果图就是这样的（因为博客对图片大小有限制，因此截屏时间没有很长）