How to make videos into web page background_Shang pin China focuses on high quality website construction

It is cool to use video as the background of a web page, but it is also difficult. The background image attribute in CSS can only use image, SVG, color or gradient. But from Website production Technically, we can forge an effect that makes the video appear behind other HTML elements as background characters. The difficulty is that the video should fill the entire browser page and respond to changes in the size of the browser window.

Watch demo 1

Limitations of video as web background

Before implementing hands-on coding, we should first consider some problems of video as the background of web pages:

■ It is not because it is technically feasible that you can use it at will: the video content used as the background must enhance the appeal of the page content, not because it is beautiful or technically cool.
■ The background video should be set to play automatically, and the sound should be turned off by default; In fact, it's better to have no sound in the video. (You can place a button on the page to control the sound.)
■ The background video should have an alternative picture. When the browser does not support this HTML5 technology and video format, the picture should be used instead. The background image should also be used as a placeholder while waiting for the background video to load. For some mobile devices that do not support automatic video playback, pictures should also be used instead.
■ The length of the video is very important: if it is too short, it will obviously feel repeated play (the background video is usually repeated play). If it is too long, it will become a plot narrative. If so, this video should be played on the page separately. I suggest that the length of the video should be between 12-30 seconds.
■ Bandwidth is a big problem. The volume of video should be very small and compressed as much as possible. At the same time, it needs to automatically adapt to the screen size on different size devices. If possible, you should use JavaScript control to load background videos of different resolutions for different screen sizes. The background video should be less than 5M. If you are less than 500K, it is better.

We should be aware of the above situations. Let's take a look at the details of the technical implementation.

CSS code

Use the code method of playing video in HTML5 Video:

<video autoplay loop poster="polina.jpg" id="bgvid">

<source src="polina.webm" type="video/webm">

<source src="polina.mp4" type="video/mp4">

</video>

Note: The sequence of video formats is very important, because in some versions of Google Chrome, if the. webm format video is placed behind other videos, the video will not play.

We use the first frame of the video as the cover image of the video, so that once the background video is loaded, we can see a smooth transition from the picture to the background video.

How to expand video to full screen:

video#bgvid {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto; height: auto; z-index: -100;

background: url(polina.jpg) no-repeat;

background-size: cover;

}

Some older browsers cannot play videos in this format, but they still recognize<video>tags (except IE8/6). For these browsers, we use background image to make up for their lack of support. The image used is the cover image of the video.

You may find that on mobile devices, the<video>tag cannot be extended to the full screen, because the screen aspect ratio of these devices limits the expansion of video. I will continue to discuss this issue in future articles.

Problems of Video Background Technology in IE 8

IE8 cannot recognize not only<video>tags, but also all HTML5 tags. This is a problem. For IE8, we should at least make the alternative background image visible. To achieve this goal, we need two things: a line of JavaScript code and a CSS conditional judgment comment statement.



Make the following statement in your CSS code to let IE know

video { display: block; }

With this code, IE8 can at least recognize the<video>tag and display the background image correctly.

Using JavaScript to Realize Video Background

Although it is better to use HTML5/CSS3 to achieve video background than JavaScript, it can be said that some jQuery plug-ins and JavaScript toolkits can also achieve the effect of video background. Here are some demonstrations:

Watch Demo 2

Watch Demo 3

conclusion

If a website uses a video background, it will become quite cool. However, "the greater the ability, the greater the responsibility", please use it prudently and wisely.

How to make videos into web background

Date：2015-05-31 Source: Shangpin China Type: website encyclopedia
Word Size： small medium big

+86 10-60259772