- HTML Course
- HTML Tutorial
- HTML Document Structure
- HTML Root Tags
- HTML Flow Tags
- HTML Interactive Tags
- HTML Basic Tags
- HTML Paragraph
- HTML Line Break
- HTML Horizontal Line
- HTML Images
- HTML Data Types
- HTML Attributes
- HTML Character Entities
- HTML Styles
- HTML Formatting Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML List
- HTML Tables
- HTML Forms
- HTML action Attribute
- HTML Multimedia
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 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.
|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.|
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.
|audio||controls the audio channel's default state in the video.|
|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||plays the video file again.|
|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.|
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.
|height||specifies the height of the embedded component.|
|hspace||sets the horizontal padding around the tag.|
|type||specifies the Multipurpose Internet Mail Extension (MIME) type for the components.|
|width||sets the width of the page's embedded component.|
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.
|data||specifies the URL of the object's data.|
|form||specifies which form(s) the object belongs to.|
|height||specifies the height of the object in pixels.|
|name||specifies the object's name.|
|type||specifies the MIME type for the component.|
|usemap||specifies the URL.|
|width||sets the width of the page's embedded components.|
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.
|name||specifies the name of the parameter.|
|value||specifies the value of the parameter.|
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.
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.
« Previous Tutorial CodesCracker.com »