Adventures with the now Famous HTML5

Image for Adventures with the now Famous HTML5

Episode 1: Video on a Web Page with HTML5

I was hoping to be able to report that adding video to a web page with the new <video> tag brought to us by HTML5, would make life a lot easier. Not yet, it ain't!

I have spent a good deal of time trying to resolve a number of issues.

To a certain extent some of the problems, are my own, since I have legacy material in Quicktime .mov format, and I was reluctant to go back and convert. However, a splendid batch process has resolved this for me...

furthermore...

With HTML5 comes some new elements. One of the most exciting could be the <video> and <audio> tags. I am going to focus on the video tag and what I have done to these pages, to deliver the screencasts as HTML5 video:

First - the basic markup:

<video controls preload poster="pathto/pagetoscreecasts.png">
<source src="pathto/movie.mv4"  type="video/mp4" />
<source src="pathto/movie.ogv"  type="video/ogg" />
</video>

You will notice that I have 2 versions of the video - one in mpeg (actually encoded with H.264) format and the other in OGG or Theora format. The latter is required if you want to use this method to play the video in Firefox. Mozilla does not support video encoded in H.264 format. This is actually a pain, and I agree with these sentiments exactly.

In theory, the browsers will find the format that suits them, so Safari will play the mpeg and Firefox will play the OGV. Unfortunately, if you don't have an OGV (Theora version) then Firefox (currently [3.6]) will simply sit there and wait forever. But wait... (I hear you say):

We need to add a fallback block that will work when the browser does not support the (new) HTML5 video tag. Yes, so here is the more complex version, with a Flash fallback player:

<video controls preload poster="pathto/images/pagetoscreecasts.png">
<source src="pathto/movie.mv4"  type="video/mp4" />
<source src="pathto/movie.ogv"  type="video/ogg" />
<object type="application/x-shockwave-flash" data="pathto/player.swf" />
<param value="pathto/player.swf" />
<param value="image=pathto/posterimage.png&amp;controlbar=over&amp;file=pathto/movie.m4v" /> <param />
<img src="pathto/posterimage.png" alt="PagetoScreen Screencasts"     title="No video playback capabilities, please download the video below" />
</object>
</video>

In principal, this will work if you have the OGV file. If you don't, then Firefox will not move on to the Flash version. I hope this will change, for everyones' sake. I think the problem is that the video tag is meant to provide an alternative for browsers unable to support it. However, the <source> tag (a child of the <video> tag) is not doing the same - yet.

The solution (for me) - Convert the videos

I can only really explain this as a MAC user! There probably are methods for PC users, but forgive my MAC loyalty here.

Tools for video conversion can be Googled. Many will popup. One that is often recommended is Handbrake, and indeed, if you plan to encode videos to H.264 from DV format, then it really does a good job. Converting to OGV / Theora, is not an option unless you go back to an early version. The Handbrake team have recently removed this format.

You can actually make Theora video with an extension to Firefox.

The Miro converter is also very good.

My problem, which may be common to others, is that I have several videos in Quicktime format and so a batch process is essential. Handbrake can work in batch mode, but the Theora format is not available in that program now. The others don't do batch, so we are left with a command line process using the freely available ffmpeg2theora.

What about Internet Explorer?

In fact for versions of Internet Explorer pre 9 (in beta), then the HTML5 elements are not supported, so we will certainly use Flash if we can. However, we need to make some adjustments just to let IE know that these new elements exist.

If you read up on this in Mark Pilgrim's wonderful book - HTML5 Up and Running, you will learn about Remy Sharp's script to build the new elements for IE. However, when using the <video> tag, I found that when I had this script enabled, I get a strange little black box poking out from under the video. I could not resolve this, so I used instead, the script from Faruk AteĊŸ - Modernizer.

Posted on 09 Dec around 11am

Tags: HTML5,video

Commenting is no longer available in this channel entry.