HTML5 audio and video

NDE Designs

HTML5 audio and video

Categories: Web Design Discussions by Nick

Well, as anyone who knows me (or reads this blog at all) will know, I’m doing my university dissertation on the interactive elements in HTML5. Okay, so video and audio aren’t really what most people would consider as “interactive”, but they are only a small section of the project. I thought it’d be good (for me at least, but might be of some use to other people) for me to go over my experience of using the video and audio tags and what I think of them being added natively.

HTML5 and native audio/video

For those who don’t know HTML5 brings (among other things) native audio and video to the browser. This means that instead of us webmasters having to embed audio and video into the page we can simply use the specific tag for it (<audio> or <video>). So, instead of having to use this:

Embed Video

<object width="160" height="144"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sample.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
 
<embed src="sample.mov" width="160" height="144"
autoplay="true" controller="false"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
 
</object>

You can use this:

html5 video

<video src="sample.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>

As you can see, there is much less code which means you should run into less problems (I don’t know about anyone else, but embedding media has always been an annoyance to myself).

The Attributes

There are five defined attributes that can be included on video and audio tags to change the way they behave:

src

Specifies the source of the media file.

preload

Specifies whether the browser should preload the media before the user clicks on the element. This used to be called autobuffer.

autoplay

Specifies whether the media should play automatically or not. I would advise not playing automatically as it disrupts your user, but there are some cases you may want to have it play automatically.

loop

Specifies whether the browser should loop back to the start of the media when it finishes.

controls

Specifies whether the browser should display controls or not for the element.

Codec Support

One of the major issues surrounding the video and audio elements is the codec support. As far as I know there is an issue with the patents, but really I know very little about the subject so don’t really want to speculate on the issue.

There was talk of OGG theora and vorbis being the official standard (as they are open source), but I don’t know what is happening with that. By the official standard I mean that it will be mandatory for browsers to support the codec and so cross browser support for at least one audio+video format will be no problem.

But as I said before, I know little about this subject, you would be better having a look elsewhere.

Use the Source (Luke)!

One part of the specification that I really like is the source element, which goes inside the <video> or <audio> elements to allow you to specify different source materials. This means that the browser will check to see if the user can play the first source, and if not (e.g. if the browser does not support it) will then move on to use the second source that is defined. If all else fails you can even embed the content like you would have done before (but you only need to do this if you are looking to cover all the angles).

For example, this is an audio element which will check to see if the browser can display the OGG vorbis source and if not will then move on and use the mp3 file:

HTML5 audio

<audio controls>
  <source src="sample.ogg" />
  <source src="sample.mp3" />
  <!-- you can include the embed here as a fall back -->
</audio>

So far this has been included in recent builds of browsers, but doesn’t always work the way you want it to – but I’m sure by the time HTML5 is officially released the browsers will have it nailed down.

In Short

I like them. Okay so webmasters may have to convert video and audio files for the web (into OGG theora or OGG vorbis), but that’s background work anyway, also its not much of a change (e.g. At the moment Youtube converts their videos to flash videos). As far as I can see that is the only disadvantage they offer and the advantages outweigh that disadvantage significantly.

NDE Designs