When the buzz about HTML5 started, the one thing I was most excited about was the video tag. It was going to make video easy to embed in any situation and it was going to have fallbacks just in case a device or browser (ahem IE) didn’t support it. Perfect, I thought. Well, fast forward a few months and we’re still not quite there. Yes, it’s easy to use and works fairly well, but there’s one problem: Codecs. There’s a lack of unity when it comes to codecs so we have to encode our videos in a few formats. Luckily, you really only need to worry about one codec. I’ll explain why.
Explaining the Code:
This is the HTML5 Video Tag. With this code, videos can play in the browser without the need to use Flash. Since IE doesn’t support HTML5 yet, this example has a Flash fallback. When you load this page in IE, you’ll see the Flash player. With this video tag, we can now display videos on the iPhone and iPad!
Each browser has it’s own set of controls so the video will not have the same control panel in every browser. It’s ok though, since they will all look pretty similar and will seem familiar to the user.
<video width="640px" height="360px" poster="images/thumbs/sample-thumb.png" controls autobuffer>
<!-- safari / chrome / ie9 -->
<source type="video/mp4" src="files/sample-vid.mp4">
<!-- firefox / opera -->
<source type="video/ogg" src="files/sample-vid.ogg">
<!-- flash default -->
<!-- image default (if NOTHING is supported) -->
<img src="images/no-video.gif" alt="Video is not supported" />
</video>
Additional Arguments
<video width="640px" height="360px" controls>
Adding the controls argument adds controls to the video player. Without this argument, no controls will show. This is probably only useful for autoplay videos.
<video width="640px" height="360px" poster="images/thumbs/sample-thumb.png" controls>
Adding the poster=”…” argument adds an image. It acts differently in every browser and is still experimental. In Firefox it acts as the video thumbnail. In Safari & Chrome it displays behind the actual video. Hopefully this gets worked out before the final working version of HTML5.
<video width="640px" height="360px" poster="images/thumbs/sample-thumb.png" controls autoplay>
Adding the autoplay argument makes the video start playing on page load.
<video width="640px" height="360px" poster="images/thumbs/sample-thumb.png" controls autobuffer>
Adding the autobuffer makes the video load as soon as the page loads. You obviously don’t want to add this on alot of the videos since it will pull all the videos with this attribute.
How to Simplify It
WHen you think about it, you really only need to make sure people can see your videos on iPhones and iPads. Any other decide should allow your flash video player to be viewable. So, with that logic, all you have to do is encode your video using the .mp4 codec, drop it in the video tag, and use the flash fallback for everything else. This negates the step of having to encode it for Firefox. Simple.
