Posted 10.06.2010

Posted 10.06.2010

Making HTML5 Video Magic Happen

So, HTML5?! Buzz word.

A few months ago, I bought HTML5 for Web Designers by Jeremy Keith. It’s simple, straightforward. I ended up purchasing it after Cameron Moll spoke highly of it at the HOW design conference this past summer. Then, when Dan Benjamin and Jeffrey Zeldman interviewed Jeremy Keith on the The Big Web Show, it was only icing on the cake.

Honestly, I (still) have yet to do a lot with HTML5. But, I did implement its video player a few weeks ago because I wanted the video to be available on the iPad. It was much easier than I thought it would be, but I thought I’d share because converting my file to the proper format did take some googling, which I’d like to spare you.


THE VIDEO TAG

The tag is pretty straightforward.

<video controls width="360" height="240" src="my_greatness.mp4" poster="still_of_my_greatness.jpg"></video>

Let’s walk through each of these items.

  • Controls says that you want to use the browser’s built in controls.—If you really wanted to, you could design your own video player and hook up all the controls yourself.
  • The width and height parameters do exactly what they suggest. It controls the width and height of your video.
  • The src parameter is the source of your video. In this case, we’re calling a video called “my_greatness” that’s mp4 encoded.
  • The poster parameter is a still image (jpg of gif) that shows before the user clicks play.

And just in case you were wondering, here’s a list of items that support the video element:

  • IE 9.0+
  • Firefox 3.5+
  • Safari 3.0+
  • Chrome 3.0+
  • Opera 5.0+
  • iPhone 1.0+
  • Android 2.0+


FILE FORMATS = THE FRUSTRATING PART

The frustrating thing about HTML5 video is that different browsers support different formats. Yeah patents and such!

MPEG 4 (.mp4 or .m4v) is based on Apple’s QuickTime. So, no surprise here, Safari likes.

Theora (.ogv) is open source, which Firefox likes.

I think Chrome plays nicely with everyone.

MPEG 4 wasn’t hard to convert to. A while back, I purchased a license for Xilisoft Video Converter. —It’s a cheap, simple program that I was able to recommend to a client that needed to convert a lot of videos to .swfs. It allowed them to create overlays and perform a few other minor editing commands without purchasing Flash. You can convert videos to just about any format you want…except Theora.

What’s a developer to do? This is the Googling part I mentioned earlier.

Theora.org has a download listed on their site: ffmpeg2theora. Once you download it to your computer, double click to install. Then, open up Terminal. I know. Scary. But, I promise, it’s easier than you think! I typically avoid the terminal because I know a mistyped character could wreck havock on my computer, but really…it’s not that bad!

Then, type ffmpeg2theora [space]

Find the file in Finder that you want to convert. I used an .mov, but it should support some other options. Click and drag the file from Finder to the terminal window. It will auto-magically generate the path for you.

Then, type [space] -o [space] new file path and name

You should be looking at something like this:

Then, once you hit enter, you’ll see the Terminal start processing the file for you:

As soon as it’s done, the new file will appear with the name in the place you specified. In my case, the desktop. See that wasn’t that hard!

FILE FORMATS = THE COOL PART

The cool thing about HTML5 video is that it degrades nicely. So, if I’m in Safari, it will play my .mp4 file. If I’m in Firefox, it will play my .ogv file. If my browser likes neither of those options, I can even get it to play a .swf.

<video controls width="360" height="240" poster="still_of_my_greatness.jpg">
    <source src="my_greatness.gov" type="video/ogg">
    <source src="my_greatness..mp4" type="video/mp4">
    <object type="application/x-shockwave-flash" widt="360" height="240" data="player.swf?file=my_greatness.mp4">
        <param name="movie" value="player.swf?file=my_greatness.mp4">
        <a href="my_greatness.mp4">Download my Greatness</a>
    </object>
</source> 

Done!


MORE (TECHNICAL) INFORMATION

If you want a lot more information (and another alternative for encoding video), check out DiveIntoHtml5.