Technical Discussion on Using Video as Web Page Background

Intermediary trading http://www.aliyun.com/zixun/aggregation/6858.html"> SEO diagnostic Taobao customer hosting technology hall

Using video as a web page background is a cool thing, but it's also a hard thing. The background-image property in CSS can only use images, SVGs, colors, or gradient colors. But technically speaking, we can fake an effect so that the video appears behind other HTML elements as a background character. One of the difficulties is video to fill the entire browser page, but also to respond to changes in the size of the browser window.

Watch the demo 1

http://www.webhek.com/demo2/video-background/

Video as a web page background limit

In the hands of coding before the realization of the video as a web page background some of the problems we have to think clearly:

You do not want to be at your fingertips because you're technically viable: video as a backdrop must enhance the appeal of your page's content, not because it's pretty or technically cool. The video as background should be set to autoplay, and by default it should be off; in fact it is best to have no audio in the video. (You can put a button to control the sound on the page.) The background video should have an alternative image, which is replaced by a picture when the browser does not support this HTML5 technology. Waiting for the background video loading process should also use the background picture placeholder. For some mobile devices do not support mobile video playback automatically, you should also use the picture instead. Video length is important: Too short noticeably plays repeatedly (background video is usually played repeatedly), too long becomes storyline, and if so, the video should be placed on the page alone. I suggest the length of the video should be between 12-30 seconds. Bandwidth is a big problem. Video volume should be small, try to compress. At the same time, it needs to automatically adapt to the screen size on different size devices. If possible, you should use JavaScript controls to load different resolutions of the background video for different screen sizes. The best background video is less than 5M, if you are less than 500K, it is better.

On the above said that there are several things in mind, let's take a look at the details of the technology to achieve.

CSS code

How to play video using HTML5 Video:

Note: The order in which video formats are displayed is important because in some versions of Google Chrome, video will not play if .webm videos are placed behind other videos.

We use the first frame of the video as the cover image of the video, so that when the background video is loaded, we can see the transition from image over to background video.

Ways to expand your video to full screen:

Some older browsers can not play video in this format, but they still recognize tags (except IE8 / 6). For these browsers, we use the background-image to make up for their unsupported use of the image is the cover image of the video.

You may find that on mobile devices, the markup does not scale to full screen because the screen aspect ratio of these devices limits the video's expansion. I will continue to explore this issue in later articles.

Video Background Technology Problems on IE 8

IE8 not only does not recognize the markup, it does not recognize all of the HTML5 markups. This is a problem. For IE8, at least we have to show the alternative background image. To do this, we need two things: a line of JavaScript code, and a CSS conditional comment statement.

Make the following declaration in your CSS code to let IE know as a block element:

video {display: block;}

With this code, IE8 can at least identify the mark, you can correctly display the background image.

Use JavaScript for video backgrounds

Although it is better to use HTML5 / CSS3 to implement a video background than to use JavaScript, let's say there are some jQuery plug-ins and JavaScript toolkits that can achieve the same effect as a video background. Here are a few demonstrations:

Watch the demo 2

http://www.webhek.com/demo2/video-background2/

Watch the demo 3

http://www.webhek.com/demo2/video-background3/

in conclusion

If a website uses a video background, that can become quite cool, but "the greater the capacity, the greater the responsibility," use caution wisely.

(English: Create Fullscreen HTML5 Page Background Video.)