Monday, 11 April 2016

Latest trend in web design - JQuery.videobg.js

Web design it's like fashion trends - minus the runway, it has different themes every season.  These themes are very much influenced by the current technologies such as HTML5, CSS3 etc..

So what's the latest trend in web design in 2015-2016 ?  The answer is Video Background ! 
Some of the the more prominent sites that has adopted this new trends include - Paypal, Focus Lab and Ingenious Lab .

Doing this is simple , you can leverage on jquery.videobg js plugin. Bear in mind that not all browsers supports mp4 format and to overcome this limitation, the plugin allows you to specify four different types of format including mp4, ogg, webm and jpg (for browsers that do not support video).

Some of the limitations include :

1. It's worth nothing that iOS disabled auto-play for video, in this case your trendy looking video backgroud will fall back to jpg image.

2. Keep your video size between 500KB-1.2MB to achieve reasonable download speed for your website

3. You may use https://cloudconvert.com/mp4-to-ogg to covert your mp4 .


jquery.videobg can be yanked from https://github.com/sydlawrence/jquery.videoBG



BROWSER SUPPORT


VideoImage
Firefox 4 (the best experience)Yes (webm)Yes
Internet Explorer 9Yes (mp4)Yes
Firefox 3.5Yes (ogv)Yes
ChromeYes (webm/mp4)Yes
SafariYes (mp4)Yes
Opera 10.5+Yes (ogv)Yes
Internet Explorer 8NoYes
Internet Explorer 7NoYes
Android BrowserNoYes
Mobile SafariDoes not modify default behaviour
Older Browsers that support position:fixedNoYes
Archaic browsersDoes not modify default behaviour

For consultancy on mobile solutions or mobile apps contact hey@inglab.com.my

0 comments:

Post a Comment

Popular Posts

Recent Posts

Unordered List

Text Widget

Latest Post

Popular Posts