HTML has introduced two new multimedia tags, AUDIO and VIDEO, for displaying the audio and video streams on a Web page.
You can play the multimedia files, which are stored in your local computer, on the Web page by specifying their location. The src attribute is used to specify the multimedia file to play it on the Web page.
If the Web browser does not support AUDIO and VIDEO tags, then the text defined between the starting and the closing tags of these tags are displayed on the Web page.
Modern Media on the Web: HTML5 <audio> & <video>
With the release of HTML5, the need for browser plugins for audio and video content began to go away. HTML5 introduced two new elements that include playback functionality for supported media formats. These two new elements are audio and video. In this tutorial we’ll cover how to use the new tags, the media formats supported by these tags, and how to use the iframe element to embed media files hosted on an external website.
The audio element can be used to add audio content to a web page. Files embedded in this way are played by the audio playback engine built into all HTML5 compliant browsers. The syntax can be very simple, or it can be made more complex by adding in multiple file formats as well as fallback options for unsupported browsers.
At a minimum, to use the audio element the following attributes must be used:
- src defines the URL where the audio content is hosted.
- type defines the file format.
- controls must be specified or no visual element will appear to control playback of the content.
A closing audio tag must be used, and additional content may optionally be nested between the opening and closing tags. In the code below, the text between the tags would appear in the event that the browser viewing the web page did not support the audio element.
There are several other attributes that may be optionally added to the audio element including:
- autoplay: If this attribute is used, the audio will begin to play as soon as enough has been downloaded to begin playback.
- loop: When this attribute is present the audio file will automatically start over once it has played through.
- muted: If you want audio content to be muted when initially loaded, use this attribute.
- preload: This element can be used with the value none, metadata, or auto to tell the browser how much of the audio file to preload. Note that if autoplay is applied to an audio element it will override the preload attribute.
The video element follows the same basic syntax as the audio element. In it’s most basic form, all we need to do is use the src element to identify the video URL and add the controls attribute so that our website visitors can control video playback. We’re also going to use the width and height attributes to set the size of the video player, but this is optional.
There are several additional attributes which can be used to influence how video content is loaded and appears in the browser. These attributes include:
- autoplay : If this attribute is used, the video will begin to play as soon as enough of the video has been downloaded to begin playback.
- loop : When this attribute is present the video will automatically start over once it has finished playing.
- muted : If you want the audio content of the video to be muted use this attribute.
- preload : This element can be used with the value none, metadata, or auto to tell the browser how much of the video file to preload. Note that if autoplay is applied to a video element it will override the preload attribute.
- poster : Use this attribute to select an image to display as the poster for the video until playback begins.
Supported File Formats
A variety of different video and audio file formats can be used along with these HTML5 elements. However, support for different formats varies from one browser to the next.
Selecting File Formats for Audio Files
There are four audio formats with broad browser support. While support for other formats is available on a more limited basis, these four formats are the ones commonly used for delivering audio content to the web browser.
- Wav files are very high quality but also very large.
- The MP3 format is much smaller than Wav, but it is a proprietary format and quality issues become apparent at low bitrates.
- AAC format is similar to the MP3 in that it is a proprietary format. It performs better at bitrates above 100kbps.
- Ogg is an open-source standard, making it popular with developers, and sound quality is much better at low bitrates than MP3.
Selecting File Formats for Video Files
There are two leading video file formats which can be used with the video element and are supported by most web browsers:
- WebM is a newer open-source format developed by Google.
- MP4 higher quality and broader browser support than WebM.
Using <track> to Add Subtitles
The track element can be added as a child to any audio or video element to link a timed text file to the media content. The file linked with the track element must be formatted in WebVTT format. Quite often more than one track file is added to a video or audio element to provide captions or subtitles in multiple languages.
The kind attribute is used to specify what type of data is contained in the attached file. Values that can be applied to the kind attribute include subtitles, captions, descriptions, chapters, and metadata.
Other attributes that may be used with the track element include:
- label: Used to add a label to help users identify the track best suited to meet their needs.
- src: Identifies the URL of the track file.
- srclang: This attribute is required if the kind attribute is set to subtitles and identifies the language of the subtitles contained in the associated track file.