Introduction to how to set video background in HTML5

We often need to use videos as the background of web pages, but the setting is often unsatisfactory. I set it up today and it can basically meet the requirements. Maybe some small details are not done too well. OK, I hope you can point it out and we can make progress together

Step One: Preparation

If you want to do your job well, you must first sharpen your tools. We first need to prepare a video. I prepared a video like this, as shown in the picture:

Isn’t it beautiful? Of course, it’s not as beautiful as me.

Second Step: Introduce the video

Here we need to use the video/ tag, and then write the path of the video in the source, autoplay is used to make it play automatically, muted is used to mute it, and loop is used to play in a loop , you can add it according to your personal wishes, if you don’t want to add it, you’ll lose

<video id="v1" autoplay muted loop style="width: 100%">
    <source  src="mp4/loading.mp4">
</video>

The third step: adjust the video to adapt to the screen

The above steps cannot meet our needs. At this time, we You will find that there are scroll bars, and the video will block the content we want to display, but this is far from the result we want. Don’t be afraid, I’m here

video{
          position: fixed;
          right:0;
          bottom: 0;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          z-index: -9999;
          /*灰色调*/
          /*-webkit-filter:grayscale(100%)*/
 
      }

This is OK, -webkit-filter: Grayscale (100%) is used to adjust the color tone, and it is also applicable to img

Step 4: Video playback speed

You can use the playbackRate attribute of the video to control the video Playback speed, if you want the background video to play at a slow speed, you can add the following javascript

<script>
    var video= document.getElementById(&#39;v1&#39;);
    video.playbackRate = 0.5;
</script>

Okay, go and set up your cool background

More programming related knowledge, Please visit: Introduction to Programming! !

The above is the detailed content of Introduction to how to set video background in HTML5. For more information, please follow other related articles on the PHP Chinese website!