HTML 5 Video: making the web prettier

Before HTML 5, video was a real pain to use. You almost always needed flash to be installed and this always caused problems and if you were to use it within your site, it was typically something you needed to choose to click, sit back, wait to buffer and then watch. Boring.
HTML 5 has done away with the need for flash altogether by making video an integral part of HTML and no plug-ins required. It has also meant you can use and style video in a similar way to any other HTML element.
The mark-up is incredibly simple:

<video width="100%" height="auto" controls>
    <source src="" type="video/mp4">
    <source src="" type="video/webm">

The output is:

Style it with a -webkit-filter: grayscale(100%); (Chrome 19+, Safari 6+, Safari 6+ iOS):

Style it with a -webkit-filter: sepia(0.8); (Chrome 19+, Safari 6+, Safari 6+ iOS):

Browser support is getting better, with nearly every major browser now supporting it. The only downside is most mobile devices don’t allow autoplay – as a work-around you will need to use fallback images which are loaded in place of any video elements which you use as backgrounds. It is apparently due to battery life issues which are understandable. You will also need to provide 2 file types for video as each browser has a different video format preference. (Mp4 & Webm)
With every design we are now producing we are considering swapping any large graphical elements with video and it looks great.
So if you want to bring your website to life, give us a call and let our designers get to work!

Written by Oli Yeates


Follow Oli on Twitter