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.
<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:
<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 |
