Technical discussion on using video as background of web page

Using video as a web background is a cool thing, but it's also a difficult thing to do. Properties in CSS background-image can only use images, SVG, colors, or gradients. But technically, we can forge an effect that allows the video to appear behind other HTML elements in a background character. The difficulty is that the video fills the entire browser page and responds to changes in the size of the browser window.

Watch Demo 1 video as a limiting factor for web backgrounds

Before the implementation of the hands-on coding, video as the background of the page some questions we have to consider clearly:

• Not because it's technically possible. You can use it: the video content as a background must enhance the appeal of the content of the page, rather than using it because it is beautiful or technically cool.
• The background video should be set to AutoPlay, while the default should be to turn off the sound; in fact, the video is best without sound. (You can place a button on the page that controls the sound.) )
• Background video should have an alternative image, when the browser does not support this HTML5 technology, video format with pictures instead. Background image placeholders should also be used in the process of waiting for background video to load. For some mobile devices that do not support video AutoPlay, you should also use a picture instead.
• The length of the video is important: it is too short to have a noticeable repetition (the background video is usually repeated), too long to be a plot narrative, and if so, the video should be placed 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 the video should be very small and compress 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 to control the loading of background video at different resolutions for different screen sizes. Background video preferably less than 5M, if you are less than 500K, that is better.

Let's take a look at the details of the technical implementation of the above mentioned situations.

CSS Code

Video using the code method for playing video in HTML5:

<VideoAutoPlay Loop Poster= "Polina.jpg"ID= "Bgvid">  <Sourcesrc= "POLINA.WEBM"type= "VIDEO/WEBM">  <Sourcesrc= "Polina.mp4"type= "Video/mp4"></Video>

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

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

Ways to extend video to full screen:

 video#bgvid  { position :  fixed ;  right :  0 ;  bottom :  0 ;  Min-width :  100% ;  Min-height :  100% ; :  auto ; :  auto ;  Z-index :  -100 ;  background :  URL (polina.jpg) no-repeat ;  Background-size :  cover ; }

Some old-fashioned browsers can't play video in this format, but they still recognize <video> tags (except IE8/6). For these browsers, we used background-image to compensate for their unsupported, the use of the image is the video cover picture.

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

The problem of video background technology on IE 8

IE8 not only cannot recognize the <video> tag, it does not recognize all the HTML5 tags, this is a problem, for IE8, we should at least let the alternative background image can be displayed. To achieve this, we need two things: a line of JavaScript code, a CSS condition to judge the comment statement.

<!-- [If Lt IE 9]><script>  document.createelement (' video '); </script><![ ENDIF] -

Make the following statement in your CSS code to let ie know that <video> it is a block element:

Video {Display:block;}

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

Using JavaScript for video backgrounds

Although it is better to use HTML5/CSS3 to achieve a video background than to use JavaScript, it may be useful to say that there are some jquery plugins and JavaScript toolkits that can achieve the same effect as the video background. Here are a few demos:

Watch the demo 2 Watch the demo 3 conclusion

If you use a video background on a website, it becomes pretty cool, but "the bigger the power, the greater the responsibility," the more prudent it is to use it wisely.

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

Technical discussion on using video as background of web page