web front-end entry to the real: HTML5 achieve dynamic video background Home

You want to achieve as a home-motion video background of it? Come together to learn, this article will take you to achieve H5 dynamic video backgrounds together;

First Internet to find some clear video download, best MP4 format; download Well after we create a new html file to write code:

html code:

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

A video label wrapped, source represents the source file, autoplay attribute autoplay, loop represents the loop, muted silence on behalf of players;

If the property is not added autoplay does not play automatically, the page will display a black screen;

css code:

*{  
    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 positioning code is mainly to achieve full-screen playback and amplifying effect, mainly for video set width and height or the like, do not forget to give the z-index values, so that at the bottom, as long as can be less than 0 ,No effect;

So our motion video background is complete, if you want to set the playback speed, we can add the js code (video plus label id = "v1" attribute):

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

So how do if we want to add content to the page it?

<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 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

Yes, add external video tag, and then we renderings is such (because the blog there are restrictions on the size of the picture, so the time is not very long screen shot)