HTML Multimedia

Multimedia comes in different format. It can be pictures, audio, video, animation and much more. Modern web pages often have embedded multimedia elements and supports various multimedia format.

Multimedia Formats

Multimedia elements like audio and video are stored in media files. The most common way to look up a media file is to look its extension.

HTML5 <audio> Tag

Before HTML5, audio was played with a plug-in. HTML5

<audio controls>
<source src="song.ogg" type="audio/ogg"></source>
<source src="song.mp3" type="audio/mpeg"></source>
<source src="song.wav" type="audio/wav"></source>
</audio>

Audio Formats

MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) is a format for electronic music devices.
RealAudio	.rm .ram	RealAudio was developed to allow streaming of audio with low bandwidth.
WMA	.wma	WMA files can be delivered as a continuous flow of data, which make it practical for use in Internet Radio.
AAC	.aac	AAC was developed by Apple as the default format for iTunes.
WAC	.wav	WAV is compatible with Windows, Macintosh and Linux.
Ogg	.ogg	Ogg was developed by Xiph.Org Foundation.
MP3	.mp3	MP3 is the most popular sound format. It is supported in all major browsers.

HTML5 <video> Tag

Before HTML5, video was played with a plug-in. HTML5 <video> element is used with which one can embed video files on a web page. HTML5 on supports MP4, WebM and Ogg video file.

For example:

<video height="240" width="320" controls>
<source src="movie.ogg" type="video/ogg"></source>
<source src="movie.mp4" type="video/mp4"></source>
<source src="movie.webm" type="video/webm"></source>
</video>

Video Format

AVI	.avi	AVI was developed by Microsoft, therefore can be played in Windows Computer.
WMV	.wmv	WMV was developed by Microsoft, therefore can be played in Windows Computer.
Quicktime	.mov	Quicktime was developed by Apple, therefore can be played in Apple Computer.
RealVideo	.rm .ram	RealVideo was developed to allow streaming of audio with low bandwidth.
Flash	.swf .flv	Flash was developed by macromedia.
Ogg	.ogg	Ogg was developed by Xiph.Org Foundation.
WebM	.webm	WebM is a project by the web giants Mozilla, Opera, Adobe and Google.
MPEG	.mpg .mpeg	MPEG is the most popular video format in the internet.
MPEG-4 or MP4	.mp4	MP4 is the upcoming video format of the internet.

HTML5 <source> Tag

The <source> tag is used to specify multiple media resources for media elements such as <audio> and <video>. The <source> tag allows you to specify alternate video or audio files which the browser may choose from, based on its media types and codec support.

For example:

<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<source src="song.wav" type="audio/wav">
</audio>

HTML5 <track> Tag

The <track> tag is used to specify text tracks for media elements. This element is used to specify subtitles, caption files or other files containing text, that should be visible while the media is playing.

For example:

<video width="320" height="240" controls>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitle" srclang="en" label="English">
</video>

HTML Plug-ins

Plug-ins are used to extend the functionality of the HTML browser. A plug-in is a small computer program that can be used for many purpose: to display maps, scan for viruses and much more. Some of the well-known plug-ins are java applets and Adobe flash player. Plug-ins are added using the <object> tag and <embed> tag.

HTML <object> Tag
The <object> tag is used to define an embedded object within an HTML document. It is supported by all major browsers. It is used to embed plug-ins in Web pages.

For example:
Audio:

<object height="50" width="100" data="song.mp3"></object>

Video:

<object data="movie.mp4" height="200" width="200"></object>

HTML <embed> Tag
The <embed> tag is used to define a container for an external application or interactive content. It is supporteddi in all major browsers

For example:
Audio:

<embed height="50" width="100" data="song.mp3">

Video:

<embed src="movie.mp4" height="200" width="200">

HTML <param> Tag
The <param> tag is used to define parameters for plug-ins embedded with <object> tag.

For example:

<object data="song.mp3">
<param name="autoplay" value="true">
</object>