A website background video HTML5 introduction
One of the biggest reasons for the increase in website background video is HTML5. Background video suddenly became easier to implement on a website, while at the same time the issues and occurrence of problems decreased. Of course it isn’t perfect but it is a big step in the right direction. So what is it about HTML5 that changed the whole landscape of online background loops? What is the main difference between now and before. Without going into an abundance of detail the main difference is <video>. It is actually slightly more complicated and there are other factors involved but by adding the video element <video> in HTML5 it became possible to embed video into a HTML document. Videos can now be manipulated just like any other element on a HTML page. The following are some differences when developing a background video in HTML5:
- There are only 3video types that you will need to worry about using HTML5. These are MP4, WebM, andOgg/Ogv. The MPEG-4 file type is generally encoded in H.264 which allows for playback in third party Flash players. As a result you don’t need to keep a FLV video copy to support a fallback method. What you need to know is that you only need to create two different video formats to support all browsers. MP4 for Safari and IE9 and either WebM or Ogg for everything else as both are supported.
- Although HTML5 is viewed as a replacement for the FLV video format it isn’t a video codec itself. HTML5 functions as a player and it is a player you can add to any HTML page just by adding one of the three codecs MP4, WebM or Ogg. That means that video can be played in the browser without any additional software. To play flash video a plugin must be installed.
- The HTML5 video tag is directly part of the DOM so changes can be made to it with scripts and CSS more effectively than you can an embedded Flash object. In other words HTML5 is just plain easier to work with.
- Many mobile devices such as tablets and smart phones do not support Flash including iOS and Android devices, which happen to be a big part of the mobile market.
- The video quality of FLV is not as good as that of the codecs that HTML5 supports so it takes bigger FLV files to achieve the same quality as MP4 or WebM. When it comes to website background video bigger files mean longer loading times.
If you have looked around and tried to research using video for moving background websites you have probably seen plenty of talk of codec and formats. MP4, H264, Ogg, Ogv, MKV and others may be mentioned. Why so many formats requiring extra coding for video to play on all browsers? The reason is not technical as might be expected, but rather a simple matter of business. FLV and MP4 H264 have patents and sometimes require licensing. The patent holder has the right to set the requirements they wish. What does that have to do with developing a background video website? There is a push towards the free formats like WebM and MKV to ensure free formats remain available. Some browsers no longer support paid formats. What it all comes down to is that there will remain format and codec issues until there is an agreement on a standard format. In the meantime HTML5 continues to gain traction and is expected by many to eventually dominate FLV and eventually result in a video standard that is consistent.