Using ‘Modernizr’ to implement HTML5 video


Last week I was playing around with Modernizr,  a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

For a project I’m currently working on, there will be plenty showcasing images and videos, so it would be helpful to have the videos playing straight into the browser without the need for third party plug-ins and also for our users on iPod, iPhones, and iPads to have accessible videos. Modernizr is great for this as it will use the new HTML5 video markup for and display the video in Adobe Flash for browsers like Internet Explorer.

As this is a relatively small scale project it was nice to try out this method of implementing HTML5 video. The only downside I can see at the moment is the need two different file formats available, one .mp4 for WebKit (Safari) video and .ogg for Firefox/Opera. This is a pain in the arse! Oh and the <1% of users who disable javascript will just get an image holder (have no fear though as they have the choice of downloading the video).

But rather than re-write the web I’m just going to direct you to Modernizr, and Video for Everybody, check it out yourself!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.