Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
14th August 2009

Audio and video in HTML 5

HTML 5 will include tools to play and display video and audio inside the browser, with just one simple HTML tag

HTML 5 will include tools to play and display video and audio inside the browser, with just one simple HTML tag. While they’re crucial currently, you may find yourself asking ‘who needs plug-ins now?’

BROWSER PLUGINS ARE, to say the least, awkward. You never know just what your users have installed, or even which versions they support. We’ve all been there, with a fresh install of Firefox, suddenly finding we don’t have the right plug-in or codec to see the video that’s waiting for us on someone’s site. It’s frustrating and annoying, and sometimes it’s just easier to go somewhere else.
HTML 5 is intended to make that go away. Not only does it add video and audio tags that work just like our old friend <image>, it’s also expected to mandate browser support for key media types, including the open source Ogg formats.

<video src = “ myvideo.ogv” controls = true poster =
“myimage.jpg” width = “320” height = “240”>
<a href = “ http://www.mysite.com/mvideo.
ogv”>Download the movie</a>
</video>

Putting video (or audio) on an HTML 5 page is easy. All you need is the URI of the movie you want to display, and you’re ready to add it to a <video> tag. Unlike <image>, you can use a closing </video> tag to provide a download link or an
embedded Flash Player for users without access to an HTML 5 browser. The controls option allows you to turn the default controls on and off. There’s a JavaScript API for <video> and <audio> so you can add your own controls to a page.
There’s also support for loading an image that displays while the movie is loading or isn’t being played, using the poster option. Just provide a link to the preferred image.
One interesting option lets you use the <source> tag  to define different versions of a video or an audio file, so if a user (or browser) has a preferred format, then it will be available. You’ll need to include the MIME type of the format as part of the source definition.

Audio and video in HTML 5
A QuickTime video playing directly in a copy of Apple’s Safari browser, using the HTML 5 <video> tag

Audio and video in HTML 5

You can use any HTML editor to work with HTML 5 – just don’t
expect every new tag to be recognised

Tags:
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://krzychukula.blogspot.com/ Krzysztof

      “BROWSER PLUGINS ARE, to say the least, awkward. You never know just what your users have installed, or even which versions they support.”

      In my opinion: You will never know what browser your users have installed, or even whitch version they support. So thing that works for most by plugin, but using HTML5 will be not recognised.

      But I hope to at least HTML5 will kill IE6 :)

    • Ray

      This would be great were it not for vested interests and disagreements over HTML 5 video implementation by various parties influencing the browser market:

      http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-video-codec-debate.ars

      The fact is that there is no real standard and is unlikely to be for some time. Therefore, to effectively guarantee delivery of video it looks like Flash is going to be the most universal way for some time to come.

    • http://www.brianwiltshire.net Brian

      WoW !!!

      This is really gonna be awesome as soon as HTML 5 is widely available.. When will that be !!! cmon browsers lets get it going…