Getting started with the HTML5 Audio Video API
12 Nov 2011The HTML5 Audio and Video API is a real game changer. For starters, think about how this affects the (once) mighty Flash. For years Flash was the most popular way to distribute audio and especially video via the web to a browser. Now that can change with HTML5. Even Adobe has announced that it is to stop developing Flash for mobile
The Basics
Getting started with the Audio and Video API is real easy (as is everything in HTML5, in fact!). At the very basic level all you need to do is declare an
<video src="media/some-video-file.mp4"></video>This is so basic that it does not even render the controls. In order to control video playback, the user has to use the context menu (which is not so easy to find for some). In order to render controls simply add the controls attribute like so:
<video src="media/some-video-file.mp4" controls></video>Now we see the controls appear as sown below (notice that the first frame of the video is shown by default):
Simple! So why does HTML5 have the option to not show the controls? Well the reason is to give the developer control over how the controls are rendered. Since JavaScript has an API to access the Audio and Video instances within the browser it is possible to create and style a “Play/Pause” button in anyway you like! Here is some example JavaScript code that demonstrates how to do this:
1
2
3
4
5
6
7
8
9
10
11
12
function playPauseMusic() {
var music = document.getElementById("music");
var playPauseBtn = document.getElementById("playPauseBtn");
if (music.paused) {
music.play();
playPauseBtn.innerHTML = "Pause the Music!";
}
else {
music.pause();
playPauseBtn.innerHTML ="Play the Music!";
}
}
As you can see this is quite easy to do. Simply add an audio tag to the html page with id=”music” and a button tag with id=”playPauseBtn” and this JavaScript can be used to control the play / pause of your music! All it does is render a button but it works and demonstrates how easy it is to use the (in this case) Audio API (the Video API is very similar, by the way).
Use the Source!
So far I have only shown some simple examples. It is possible in HTML5 to specify different sources so that you can provide different file types for the media you want rendered. So in order to increase the chance that the browser supports the particular container or codec, make sure you save your media as different file types (e.g. ogg, mp4 etc) and use the source as in the following audio example:
<audio>
<source src="1.ogg" >
<source src="1.mp3" >
Some music by someone!
</audio>Note the text ‘Some music by someone!’ just before the closing
Autoplay attribute
HTML5 Audio and Video API comes with the optional autoplay attribute. Use this with caution! There is nothing more annoying than a website that starts playing audio or video automatically on load! However, if you must, simply include the attribute in the
Video API Basic Tip: Play Video on Mouseover
One thing you might have seen on the web is the concept of playing a video in a thumbnail when the mouse hovers over the video image. This is surprisingly easy to do in HTML5, by the way! All you need to do is set the onmouseover and onmouseout events to call play() and pause() methods respectively, like so:
<video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true">
<!-- video source here -->
</video>That’s it for this very basic introduction! If you want to learn more about the HTML5 Audio and Video API, check out some of the following resources: