How do I use HTML5 video on my web site?

Even if it has not happened yet, it will. Someone will ask you to put video on their site. In this day and age you would think it would be a simple process but it is not. There are multiple browsers supporting different video codecs.

Adobe Flash is still the best and easiest way to add video to your site but it is not supported on the iPhone and or iPad and the writing has been on the wall for a long time that Flash is on it’s way out.

So if you want your video on an iPad or iPhone you’ll want to use HTML5. Here’s the code you need.

[prettify]

[/prettify]

You can set the width property. You can use the boolean ‘autoplay’ (handle with care as autoplaying video might tick off your site users) as well as the ‘controls’ to let the person scroll through the video and play and pause it. The player is native to the browser and will look different depending on which browser you are viewing it in.

Which format do you need to convert your video into?Read this.

In our example above the .mp4 format is H264 which works great in Chrome.

How do I create an .ogg file? Well, if you have an expensive program like Adobe Premier you can use that but if you don’t have that luxury, you can use this great free site that will allow you to upload your .mp4 video and it will convert it for FREE into whatever format you need. This is pretty cool.

Below is a great chart from http://www.findmebyip.com/litmus/.

Chart detailing current browser support
Chart detailing current browser support (findmebyip.com/litmus/)

Working with audio in HTML5 is very similar. You can find out how it works by reading this blog entry.

Leave a Reply

Your email address will not be published. Required fields are marked *