How to play video in HTML5

casualOur very own Martin Beeby has been exploring HTML5 and created some tips and tricks to help you if you’ve not yet dabbled in HTML5. Martin is a Developer Evangelist for Microsoft and his illustrious career to date involves karate, school bands and chess. In his own words, ‘I like indie music, design and snowboarding. I like to mention snowboarding because it makes me sound cool. I wouldn’t want to mention the fact I like chess, programming philosophy, and math puzzles; because that might make me sound like a geek’. Enjoy!


How to play video in HTML5

On Friday I was manning the HTML5 stand at the dConstruct event in Brighton. I was genuinely knocked-out by the level of interest that people were showing in HTML5 and IE9. Although there were many experts amongst the people I spoke to there were a few that had never used HTML5 and weren’t really sure of what they could achieve with it.

I thought it might be a good idea to run through the basics for people that have not been following the Buzz around HTML5. Where better to start I thought than the new Video Tag.

Until recently if you wanted to play video on your website you had to use a plug-in like Flash or Silverlight. HTML5 now gives you the option of playing video by just using a HTML tag:

clip_image002

All we really need to add is the source tag of the video that we want to play. We can also add an optional controls attribute to specify if the play, pause and stop controls should be shown or not.

Now there is the small matter of what video formats can be supported… here’s the rub. The current HTML5 draft specification no longer specifies a video codec that must be used and so the various HTML5 browser manufacturers have chosen which formats they will and won’t support.

H.264 is what most sites currently use to encode their Flash Video. It is supported for HTML5 by Internet Explorer Platform Preview, Safari and Google Chrome whilst Firefox has lumped to support only Ogg Theora a codec that neither Safari nor Internet Explorer Platform Preview currently support. Ogg Theora was previously the standard codec in the HTML5 specification but was removed.

It’s quite a minor task to support both codecs, in the code snippet above I encoded the same video in both formats and simply added a source tag for both video types. Therefore in theory all HTML5 browsers should be able to play the video.

To see a demo of the video playing visit http://www.thewayithink.co.uk/html5/video.html and remember to use a HTML5 compliant browser. If you don’t have currently, why not install the Internet Explorer Platform Preview.

In this demo I used the following tools to encode the video:

Ogg – http://v2v.cc/~j/ffmpeg2theora/examples.html

MP4 – http://handbrake.fr/

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

8 Comments So Far, what do you think?

  1. Pingback:Web Script Den » Blog Archive » How to play video in HTML5 : Underbelly

  2. Pingback:How to play video in HTML5 : Underbelly | Web Scripts Maniacs

  3. Jam

    When you say “it's minor to support both codecs”, you are saying that content owner should encode everything into multiple formats just in case a user has a browser that doesn't support H.264? Isn't that very high cost?

    How will your code snippet here work in IE6? IE7 or IE8? Will they support HTML5?

    tx,

    Jam.

  4. thebeebs

    @Jam It's minor from a developer presperctive. I would generally encode video using something like ffmpeg as I engest the video into my site. The video sites I have run in the past used to encode to many different formats for all the various devices we wanted to support.

    From a hosting and stoarage side. Encoding more than once is a big problem… well if you have a lot of videos. As you say. It's a high Cost.

    IE6, IE7 and IE8 dont't support HTML5. Thats why when IE9 comes out I'll be encouraging everyone to upgrade to IE9.

  5. Pingback:How to use Scalable Vector Graphics in HTML5 : Underbelly

  6. Pingback:How to use semantic tags in HTML5? : Underbelly

  7. aislinn

    thanks for helping out..

    http://www.n8fan.net

  8. Chanel

    I’ve learn a few excellent stuff here. Definitely
    price bookmarking for revisiting. I surprise how a lot
    effort you place to make this sort of magnificent informative site.

    My webpage – google.ca – Chanel,

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>