HTML5 Video | The Basics

By | March 18, 2011

Wow so here we are, the video tag in HTML5. This and the canvas tag have been catching all the headlines….canvas for all the right reasons and the video tag for all the wrong ones. So why is there such a fuss over this tag. As with the browser wars 10 years ago ( I feel like Obi Wan) the big players seem to be positioning themselves for a bloody battle.

Why I hear you ask?

It’s all about the format or codec of the videos themselves. The actual tag to get the video on to the web page is simple but it’s made more complex by the browser companies themselves, supporting different formats for the video itself (the issue is also the same for for the audio tag but instead of talking about that in this post I’m going to use the opportunity to do some internal linking to that post and it will also hopefully help with long tail keyword conversion) Anyway I digress.

So What are the Codecs

So for Mozilla and Chrome we have the .ogv (Ogg Theora) format which is an open source codec and in keeping with the openness of the web as perceived especially by Mozilla. But then what about Apple, champions of HTML5 and slayers if you will, of the closed development of Flash by Adobe. Well they, Apple, for reasons known only to themselves (and Microsoft who they’ve sided with) have gone for the .mp4 (H.264 codec). Surprising this as the this is not open source but unsurprisingly it is owned by Apple (and Microsoft) so much for the open source revolution Mr Jobs.

Stop talking and tell us how to put video on our page!!

Right so lets just get back to what we need to do. So this is how simple the video tag is.

HTML5 Video Demo1
So here we have just put the simple tag in there with a link to the source of the video (for this I have used .ogv which will work on Firefox and Chrome), I’ve also added the autoplay attribute but I would advise against this in the real world (or the internet world should I say) what you need to do is add a skin as they call it in flash (What? Who?) or controls as the cool kids call it now.

 

HTML5 Video Demo2
So now we’ve got the controls were laughing. All set aren’t we? Well no there’s more to think about. You may know that your customer will want to watch the video so you can preload it. How? Easy!!

HTML5 Video Demo3
Told you it was easy. Just use the preload attribute.

So what about the other codecs

Well to look after these issues with the codec we have to make the the video tag slightly more complex but its still pretty simple.

HTML5 Video Demo4
So here we’ve moved the source into it’s own tag and created 2 of these tags one for Mozilla/Chrome and one for Safari. I’ve also added a p tag with text to display if your browser doesn’t support either of these formats.

Finally just to add a little more confusion to the matter Google open-sourced the VP8 video codec that it acquired when it took over On2 Technologies. When combined with the Vorbis audio codec (that Spotify uses) and wrapped in a subset of the Matroska container format, it’s collectively known as WebM. This isn’t supported by many browsers that are in use today but it does have the buy in of most of the major players so maybe going forward this might be the answer. So how do we do this one.

HTML5 Video Demo5
So as you can see we’ve added this codec to the top so the browser reads the sources from the top and when it finds one it supports it will use it.

Conclusion

I’ve tested all these and also there seems to be a few issues with Firefox. It is supposed to support webm but in my tests I couldn’t get it working. Also there is a more comprehensive way to write the source tag but I couldn’t get that working in Firefox so I reverted back to the more simple method that seems to work better.
I will be revisiting the video tag next week to look at the api in more detail.

Update

After installing Firefox 4 on my PC all the videos stopped playing on Firefox. After a little investigation I found that in some cases for Ogg Theora formatted videos to play you have to update your .htaccess file to include:

AddType video/ogg .ogv

In fact to cover everything off you can put:

AddType video/ogg .ogv 
AddType video/mp4 .mp4 
AddType video/webm .webm

Then you shouldn’t have any issues.

2 thoughts on “HTML5 Video | The Basics

  1. Ken

    Great Article Matt. Lovin’ the blogs. I’m learning HTML5 at the same speed you release new posts. Keep up the good work.

    Reply

Leave a Reply

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