Audio Video Control in HTML5

Audio Video Control in HTML5

Audio Support
No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio> element. Well, at least, ultimately, we won’t have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it’s still a good practice to offer some form of backward compatibility.

<audio autoplay=”autoplay” controls=”controls”> 
<source src=”file.ogg” /> 
<source src=”file.mp3″ /> 
<a href=”file.mp3″>Download this file.</a> 
</audio>

Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio.
When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.

Video Support

Much like the <audio> element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn’t specify a specific codec for video, it’s left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.

<video controls preload> 
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora'” /> 
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′” /> 
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p> 
</video>

Chrome can correctly display video that is encoded in both the “ogg” and “mp4″ formats.
There are a few things worth noting here.
We aren’t technically required to set the type attribute; however, if we don’t, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself.
Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It’s up to you.
The controls and preload attributes will be discussed in the next two tips.

Preload Videos

The preload attribute does exactly what you’d guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload=”preload”, or by simply adding preload. I prefer the latter solution; it’s a bit less redundant.

<video preload>

Display Controls

If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element.
view plaincopy to clipboardprint?
<video preload controls>
Options
Please note that each browser renders its player differently from one another.