To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

HTML5 audio and video

HTML5 is the latest major standard in HTML. It defines several changes to the syntax of HTML as well as promoting new features such as audio and video straight from the browser without the need for plugins.

This article will look at these two elements.

Audio

The audio element is an incredibly useful element that can be used to output sound on a website. In the past, this kind of feature was available, but generally it required a plugin such as QuickTime.

Since the release of HTML5, the <audio> tag has represented the audio element.

HTML
<audio>
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.wav" type="audio/wav">
	<source src="music.ogg" type="audio/ogg">
	This is fallback text.
</audio>
		

The audio tag requires the source tag within it, otherwise no audio will play. If the audio tag is not supported, the fallback text will be displayed.

Video

Since the release of HTML5, the <video> tag has represented the video element.

This tag works exactly as the audio tag works:

HTML
<video>
	<source src="film.mp4" type="video/mp4">
	<source src="film.webm" type="video/webm">
	<source src="film.ogg" type="video/ogg">
	This is fallback text.
</video>
		

This is the exact same format as the audio tag.

Attributes

There are several attributes that can be added to these tags to improve their functionality:

Attribute Purpose
controls Shows the stop and play, volume and full screen controls
loop Specifies whether or not the audio or video should loop
autoplay Specifies whether or not the audio or video should play when the page loads
preload Specifies whether or not the audio or video should load when the page loads, even before the user interacts with it
poster Specifies an image to display while the audio or video loads
muted Specifies whether or not the audio or video should be muted
Provide feedback on this page
Comments are sent via email to me.