HTML5 Part 3: Audio and Video
One of the big features that is new in HTML5 is the ability to support playing audio and videos. Prior to HTML5, you needed a plug-in like Silverlight or Flash for this functionality. In HTML5, you can embed audio and video using the new <audio> and <video> tags.
From a coding perspective, the audio and video elements are very simple to use. (I’ll give you a more in-depth look at their attributes below.) The audio and video elements are also supported in all major browsers (the latest versions of Internet Explorer, Firefox, Chrome, Opera, and Safari). However, the tricky part is that you need codecs to play audio and video, and different browsers support different codecs. (For a wonderful in-depth explanation of video containers and codecs, read https://diveintohtml5.org/video.html.)
Fortunately, this isn’t a show-stopper. The support for audio and video was implemented in a brilliant way, where there is support to try several different file formats (the browser will try each and then drop down to the next one if it can’t play it). As a best practice, you should provide multiple sources of audio and video to accommodate different browsers. You can also fallback to Silverlight or Flash. Finally, any text between the opening and closing tags (such as <audio> and </audio>) will be displayed in browsers that do not support the audio or video element.
For example:
<audio controls="controls">
<source src="laughter.ogg" type="audio/ogg" />
<source src="laughter.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
With this code, the browser will first try to play the laughter.ogg file. If it does not have the right codecs to play it, it will next try to play the laughter.mp3 file. If the audio element is not recognized at all by the browser, it will display the text “Your browser does not support the audio element” where the audio control should be.
One caveat to audio and video: there is no built-in digital rights management (DRM) support; you have to implement this yourself as the developer. See this link from the W3C which explains their position. (If you have a need for DRM content, also check out the Silverlight DRM documentation, which might be an easier solution.)
Now let’s dive into each of these new elements.
Audio
First, let’s look at <audio> in more detail.
<audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
We already discussed the fallback effect of trying each source until it hopefully finds one that can be played.
Note that there is a controls attribute. This will display audio playback controls including a play/pause button, the time, a mute button, and volume controls. In most situations, it’s a good best practice to display audio controls to the user; I hate visiting a website with sound and being unable to stop it, mute it, or turn it down. Here is a screenshot of what the audio controls look like in Internet Explorer:
The controls look different in different browsers. Here are the controls in Chrome (with a song playing). The drop-down volume pops down when you hover over the sound icon on the far right.
Here are the controls in Firefox (with a song paused). Like Chrome, it also has a pop-up volume control (not shown) when you hover over the sound icon on the far right.
Other fun attributes on the audio element include:
| Attribute | Possible Values | Description |
| autoplay | autoplay | Starts the audio playing as soon as it’s ready |
| controls | controls | Displays audio playback controls on the page |
| loop | loop | Causes audio to repeat and play again every time it finishes |
| preload | auto, metadata, none | Determines whether to load the audio when the page is loaded. The value auto will load the audio, metadata will load only metadata associated with the audio file, and none will not preload audio. (This attribute will be ignored if autoplay is specified.) |
| src | (some URL) | Specifies the URL of the audio file to play |
So this code sample would not only display audio playback controls, but also start the audio playing immediately and repeat it over and over in a loop.
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
If you’d like to play around with the <audio> element yourself in your browser, there is a great “Tryit Editor” on https://w3schools.com that allows you to edit some sample code and see what happens. For audio, check out https://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio. Feel free to try the different attributes described above.
Video
Now, let’s examine the <video> element.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
As we discussed above, the video element has support for multiple sources, which it will try in order and then fall down to the next option.
Like audio, video has a controls attribute. Here is a screenshot of the video controls in Internet Explorer:
Other fun attributes of the video element include:
| Attribute | Possible Values | Description |
| audio | muted | Sets the default state of the audio (currently, “muted” is the only option) |
| autoplay | autoplay | Starts the video playing as soon as it’s ready |
| controls | controls | Displays video playback controls on the page |
| height | (value in pixels) | Sets the height of the video player |
| loop | loop | Causes video to repeat and play again every time it finishes |
| poster | (some URL) | Specifies the URL of an image to represent the video when no video data is available |
| preload | auto, metadata, none | Determines whether to load the video when the page is loaded. The value auto will load the video, metadata will load only metadata associated with the video file, and none will not preload video. (This attribute will be ignored if autoplay is specified.) |
| src | (some URL) | Specifies the URL of the video file to play |
| width | (value in pixels) | Sets the width of the video player |
Again, to play around with the <video> element yourself, use the “Tryit Editor” from https://w3schools.com that allows you to edit some sample code and see what happens. For video, check out https://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_all.
Finally, one last cool thing: YouTube has an HTML5 video option. If you have a browser that supports HTML5, you can opt-in to use an HTML5 video player instead of their normal Flash player. Sign up at https://www.youtube.com/html5.
Tomorrow, we will discuss polyfills, which allow you to develop with HTML5 while providing fallback functionality to older browsers that don’t support it.
Other blog posts in this series: