HTML Multimedia Tags

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

Attributes of AUDIO Tag

The AUDIO tag of HTML5 supports only three audio file formats i.e. .oog, .mp3, .wav

Following table shows the attributes of the AUDIO tag

Attribute	Description
autoplay	Plays the audio file as soon as the Web page loads
controls	Displays the controls on the Web page, such as play and pause buttons
loop	Replays the audio file
preload	Specifies whether the audio file is preloaded on the Web page or not
src	Provides the location of the audio file to play

Attributes of VIDEO Tag

You can use the VIDEO tag to display a video file on the Web page. The VIDEO tag supports the .gov and .mp4 file formats.

Following table describes attributes of the VIDEO tag

Attribute	Description
audio	Controls the default state of the video's audio channel
autoplay	Plays the audio file as soon as the Web page loads
controls	Displays the controls on a Web page, such as play and pause buttons
height	Specifies the height of the VIDEO tag
loop	Replays the video file
preload	Specifies whether the video file is preloaded on the Web page or not
poster	Provides an image to be displayed when the video file is not available
src	Provides the location of the video file to play
width	Specifies the width of the VIDEO tag

You can also use the SOURCE tag within the opening and the closing tags of the VIDEO tag to provide the source of the video file.

The SOURCE tag is used in a situation when the location of the video file is not confirmed. In this case, the VIDEO tag plays the first video file located in the specified path. The following code snippet shows the use of the VIDEO tag :

<VIDEO src="video.ogv" autoplay="true" loop="3" controls>
</VIDEO>

In the above code snippet, we have defined a video.ogv file in the src attribute. We have also set the autoplay attribute to true, which implies that the video file start playing as soon as the Web page loads. the loop attribute is set to 3, which implies that the video file will be played three times. In addition, the controls attribute displays the controls on the video player.

HTML Online Test

« Previous Tutorial Next Tutorial »