HTML5 implements dynamic video background

First of all, let’s take a look at the implemented renderings:

(Learning video sharing: html5 video tutorial)

Doesn’t it look cool?

If you also want to achieve this effect, then come and learn with me.

Specific steps:

First find a clear video online and download it, preferably in MP4 format;

After downloading, we create a new html file to write the code :

HTML code:

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

Wrapped with a video tag, source represents the source file, the autoplay attribute is automatic playback, loop represents loop playback, and muted represents silent playback;

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;  
        }

The css code is mainly for positioning and amplification to achieve the effect of full-screen playback. It is mainly used to set the width and height of the video. Don’t forget to give z-index. A value, let it be placed at the bottom, as long as it is less than 0, it will have no effect;

This is how our dynamic video background is completed. If we want to set the playback speed, we can add js code (video Tag plus id="v1" attribute):

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

So what if we want to add content to the page?

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

Yes, add it outside the video tag, and then our rendering will look like this (since the blog has restrictions on image size, the screenshot time is not very long):

Isn’t it very simple? Hurry up and try it yourself.

Related recommendations: html5 tutorial

The above is the detailed content of HTML5 implements dynamic video background. For more information, please follow other related articles on the PHP Chinese website!