Web Design tips: web video application in Web design

Article Description: Recommended! The innovative application of video in Web development.

Aber zou: Dynamic video is more vivid than static picture, and more information is expressed. But at present the video on the network actually with the whole page design is detached, they are framed up in a specific area for viewers to Click to watch, the video is not like a picture as a site decoration elements. The main reasons for this are browser compatibility, network speed and the limitations of the design concept. However, with the development of network technology, especially the continuous improvement of HTML5 and the continuous improvement of browsers, the potential of video in web design and development has been discovered, which provides a new direction for improving Web experience and rich content rendering.

So how do we combine video elements into a web design? Let's look at some examples first. One of the most common typical uses is that a Web page background no longer uses a static picture but a video.

Dadaab Stories This site is a good use of video background to reflect the content of the site. This is an introduction to the world's largest refugee camp site, the background of the video is very vivid to let viewers see the situation in the camp.

http://www.dadaabstories.org

The following website on a bike race also uses video to enhance the visual impact, when the mouse hovers over the focus map, it will present a low motion video, full of movement tension.

Http://www.curadmir.com

Recently, Microsoft IE11 and the Asian Animal Fund launched the Public Service website "Month Xiangzhi" also used a lot of video (ie incredibly already to 11, HTML5 support is very good, but also joined the WEBGL support, the site used this 3D technology, hehe. In addition to some of the pages of the background is lovely month bear video, in the home page of the three exquisite book cover is actually video. This design enhances the sense of digital reading and the cover of the book is vivid and varied.

Editor: This site is really shocking, highly recommended! Public Service website can make this, let a person blush!

http://moonbear.animalsasia.org/ie/

Adding a video background to a Web page is fairly straightforward and can be easily handled using HTML5 <video> tag.

First of all, to prepare the browser support video, format can be MP4, OGG or WEBM, you can learn more about the video format: http://www.w3schools.com/html/html5_video.asp Here is not a detailed description of this topic.

Next is the video embedded HTML code, refer to the following:

<video id= "Video_background" preload= "Auto" autoplay= "true" loop= "loop" muted= "muted" volume= "0" >
<source src= "videos/xxxx.mp4″type=" Video/mp4 ">
<source src= "VIDEOS/XXXX.WEBM" type= "VIDEO/WEBM" >
Video not supported </video>

The next step is CSS, which is the key to making embedded video a background:

#video_background {
Position:absolute;
bottom:0px;
right:0px;
min-width:100%;
min-height:100%;
Width:auto;
Height:auto;
Overflow:hidden;
Z-index:-1000;
}

Using absolute positioning, and "Width:auto;" Height:auto; "and" min-width:100%; min-height:100% "is to tell the browser always to the video width or height of 100% to show that any greater than 100% of the part is" Overflow:hidden "is hidden. This definition applies to any proportion of video elements. Finally, don't forget to "z-index:-1000;" To make sure that the video is on the back floor of the background.

Of course there are some jquery plug-in can be used, here is a best bigvideo.js. This plugin makes it easy for you to embed a full-screen video background.

http://dfcb.github.io/BigVideo.js/

Finally, let's summarize. Although the inclusion of video elements in web design development will give a cool impression, but there are a lot of places to pay attention to, otherwise the effect may backfire.

• Note to eliminate sound, because the general sound of the sudden appearance of the user will be plagued, if you must have audio, you must add a "close" button so that users can choose to turn off.
• When using the video background, pay attention to the foreground content contrast, after all, only the background, not distracting, you can properly add a layer of texture on the video, or dim the brightness of the video.
• Provide a clear screenshot of the first frame of the video as a picture background to take care of browsers that do not support video backgrounds or mobile devices, and also to prevent video from not being loaded without whitespace on the page.
• The length of the video should be appropriate, too short and not coherent video will give a strong sense of repetition, too long to become a narrative, the best lengths should be 10 '-30 '.