HTML Multimedia: HTML Media Tags with Examples

The term "media" refers to various means of communicating and disseminating information, such as text, images, graphics, audio, video, and animation. All these mediums of communication are collectively termed "multimedia."

A combination of video and audio files can also be used in websites to increase viewership or to provide users with information and entertainment.

HTML helps you add multimedia files to your website by providing various multimedia tags. So without any further delay, let's start describing the tags used to include multimedia elements in a web page.

HTML Multimedia Tags

HTML tags that fall under the category of "multimedia tags" are as follows:

• HTML AUDIO Tag
• HTML VIDEO Tag
• HTML EMBED Tag
• HTML OBJECT Tag

HTML Multimedia: The AUDIO tag

The AUDIO tag is used to display the audio file on the web page.

An audio file is a way for devices like computers, MP3 players, and mobile phones to store audio data.

To store audio data, you need to convert it into a digital format. The process of converting audio data into a digital file is called "encoding" of the raw audio data. It involves taking samples of audio data and storing them in a compressed format to reduce the file size.

An audio player decodes these compressed sample files to make the audio waves audible. The process of converting a digital file into audio data is known as "decoding." A codec performs the encoding and decoding of the raw audio data.

HTML5's AUDIO tag only supports the following three audio file formats:

• .mp3: The most popular of the three audio file formats supported by the HTML AUDIO tag is ".mp3." All web browsers support this audio file format.
• .wav: IBM and Microsoft created the ".wav" audio file format. It works well on all platforms, including Windows, Macintosh, and Linux.
• .ogg: The Xiph.Org Foundation created the ".ogg" audio file format.

Attributes of the AUDIO tag

The following table shows the attributes of the audio tag.

HTML AUDIO tag example

Consider the following example to learn how to embed audio files into your website.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  The AUDIO tag is not supported by your browser.
</audio>

When the AUDIO tag is not supported by the web browser, the text between the AUDIO tag is displayed. Because the text "The AUDIO tag is not supported by your browser." is available between the AUDIO tag in the above code fragment, it will be displayed if the AUDIO tag is not supported by the web browser.

You can provide multiple audio sources in multiple file formats. For example:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  The AUDIO tag is not supported by your browser.
</audio>

If there are multiple sources available between the AUDIO tag, the first supported source file will be used.

The "controls" attribute adds audio controls like play, pause, and volume.

HTML Multimedia: The VIDEO tag

The "VIDEO" tag, like "AUDIO," is used to display video files on a web page.

Following are the three video file formats supported in HTML:

• .mp4: This video file format has been developed by the "Moving Pictures Expert Group." This video file format is recommended by one of the biggest video sharing platforms, YouTube.
• .webm: This video file format has been developed by web giants Mozilla, Opera, Adobe, and Google.
• .ogg: The Xiph.Org Foundation created the ".ogg" video file format.

Attributes of the VIDEO tag

The following table describes the attributes of the Video tag.

HTML Video tag example

To provide the source of the video file, you can also use the SOURCE tag within the opening and closing tags of the VIDEO tag.

When the location of the video file cannot be determined, the SOURCE tag is used. In this case, the VIDEO tag plays the first video file found in the specified path. The VIDEO tag is demonstrated in the following code snippet:

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

In the src attribute of the preceding code snippet, we defined a video.ogv file. We've also set the autoplay attribute to true, which means the video will begin playing as soon as the web page loads. Because the loop attribute is set to 3, the video file will be played three times. Furthermore, the controls attribute shows the controls on the video player.

Consider the following example to learn how to embed video into your website.

<video width="320" height="240" controls>
  <source src="song.mp4" type="video/mp4">
  <source src="song.ogg" type="video/ogg">
   The VIDEO tag is not supported by your browser.
</video>

It is a good idea to always include width and height attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. The remaining code works similarly to "AUDIO."

HTML Multimedia: The EMBED tag

HTML allows you to embed plug-ins in a web page using the EMBED tag. This tag lets you embed multimedia in a web page and play it while opening the page.

The EMBED tag is supported by Internet Explorer as well as Netscape Navigator. It is also supported across the Windows and Mac platforms.

The EMBED tag uses the three mandatory attributes, namely src, height, and width.

Attributes of the EMBED tag

The following table lists various attributes of the EMBED tag in HTML.

HTML EMBED tag example

Following is an example of using the EMBED tag.

<EMBED src="Music.mp3" width=600 height=100></EMBED>

In the previous example, we used the src attribute to tell the browser which multimedia file to play while the web page loads. We have also defined the height and width attributes to specify the height and width of the embedded multimedia component on the page, respectively.

HTML Multimedia: The OBJECT tag

Objects like images, sounds, videos, Java applets, ActiveX controls, Portable Document Format (PDF), and Flash objects can be added to a web page using the HTML OBJECT tag.

An object tag can also be used inside the body tag. The text between the starting and ending tags of the OBJECT tag is the alternate text for browsers that do not support this tag.

Attributes of the OBJECT tag

The following table shows various attributes of the OBJECT tag.

HTML OBJECT tag example

The OBJECT tag initializes the object by passing the parameters to the object, which can be done using the PARAM tag.

In HTML, you can use the PARAM tag to define parameters or variables for an OBJECT tag. An OBJECT tag can contain multiple PARAM tags, as shown in the following code snippet.

<OBJECT data="movie.avi" type="video/quicktime" id="video" width="200" height="100">
   <PARAM name="BorderStyle" value="1" />
   <PARAM name="autoplay value=true />
</OBJECT>

In the above code snippet, we have defined an OBJECT tag, which includes a video file in a web page. We have also used the PARAM tags to pass the parameters for the OBJECT tag.

The following table shows the various attributes of the PARAM tag.

History of Browser Support for Multimedia

The first web browsers had support for text only and were limited to a single font in a single color. Later came browsers with support for colors, fonts, and even pictures.

The support for sounds, animations, and videos is handled differently by various browsers. Different types and formats are supported, and some formats require extra helper programs (plug-ins) to work.

Hopefully, this will become history. HTML5 multimedia promises an easier future for multimedia.

Multimedia Formats

The most common way to discover the type of a file, is to look at the file extension. When a browser sees the file extension ".htm" or ".html," it will treat the file as an HTML file. The .xml extension indicates an XML file, and the .css extension indicates a style sheet file. Images are identified by file extensions such as .gif, .png, and .jpg.

Multimedia files have their own formats and extensions as well, such as .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

HTML Online Test