Multimedia on the web, is sound, music, videos, movies, and animations.
Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Pictures, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
In this chapter you will learn about the different multimedia formats.
The first web browsers had support for text only, limited to a single font in a single color.
Later came browsers with support for colors and fonts, and even support for 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 elements (like sounds or videos) are stored in media files.
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. Pictures are recognized by extensions like .gif, .png and .jpg.
Multimedia files also have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
 |
MP4 is the new and upcoming format for internet video. MP4 is recommended by YouTube. MP4 is supported by Flash Players. MP4 is supported by HTML5. |
| Format | File | Description |
|---|---|---|
| MPEG | .mpg .mpeg |
MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4). |
| AVI | .avi | AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. |
| WMV | .wmv | WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. |
| QuickTime | .mov | QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4) |
| RealVideo | .rm .ram |
RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers. |
| Flash | .swf .flv |
Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers. |
| Ogg | .ogg | theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5. |
| WebM | .webm | WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5. |
| MPEG-4 or MP4 |
.mp4 | MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube. |
 |
Only MP4, WebM, and Ogg video are supported by the newest HTML5 standard. |
|---|
MP3 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music.
If your website is about recorded music, MP3 is the choice.
| Format | File | Description |
|---|---|---|
| MIDI | .mid .midi |
MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers. |
| RealAudio | .rm .ram |
RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers. |
| WMA | .wma | WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music players. Plays well on Windows computers, but not in web browsers. |
| AAC | .aac | AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers. |
| WAV | .wav | WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and linux operating systems. Supported by HTML5. |
| Ogg | .ogg | Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5. |
| MP3 | .mp3 | MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers. |
| MP4 | .mp4 | MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet. this leads to automatic support for MP4 audio by all browsers. |
|
Only MP3, WAV, and Ogg audio are supported by the newest HTML5 standard. |
|---|
Before HTML5, there was no standard for showing videos on a web page.
Before HTML5, videos could only be played with a plug-in (like flash).
The HTML5 <video> element specifies a standard way to embed a video in a web page.
The numbers in the table specify the first browser version that fully supports the <video> element.
| Element |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
To show a video in HTML, use the <video> element:
The controls attribute adds video controls, like play, pause, and volume.
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.
Text between the <video> and </video> tags will only display in browsers that do not support the <video> element.
Multiple <source> elements can link to different video files. The browser will use the first recognized format.
To start a video automatically use the autoplay attribute:
|
the autoplay attribute does not work in Safari and Opera, or in mobile devices like iPad and iPhone. |
|---|
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:
| browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 defines DOM methods, properties, and events for the <video> element.
this allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |
HTML5 provides a standard for playing audio files.
Before HTML5, there was no standard for playing audio files on a web page.
Before HTML5, audio files could only be played with a plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.
The numbers in the table specify the first browser version that fully supports the <audio> element.
| Element |
|
|
|
|
|
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
To play an audio file in HTML, use the <audio> element:
The controls attribute adds audio controls, like play, pause, and volume.
Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.
Multiple <source> elements can link to different audio files. The browser will use the first recognized format.
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:
| browser | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
HTML5 defines DOM methods, properties, and events for the <audio> element.
this allows you to load, play, and pause audios, as well as set duration and volume.
There are also DOM events that can notify you when an audio begins to play, is paused, etc.
For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.
| Tag | Description |
|---|---|
| <audio> | Defines sound content |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
the purpose of a plug-in, is to extend the functionality of the HTML browser.
Helper applications are computer programs that extend the standard functionality of a web browser.
Helper applications are also called plug-ins.
Examples of well-known plug-ins are Java applets.
Plug-ins can be added to web pages with the <object> tag or the <embed> tag.
Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank id, etc.
 |
To display video and audio: Use the <video> and <audio> tags. |
|---|
The <object> element is supported by all browsers.
The <object> element defines an embedded object within an HTML document.
It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.
The <object> element can also be used to include HTML in HTML:
Or images if you like:
The <embed> element is supported in all major browsers.
The <embed> element also defines an embedded object within an HTML document.
Web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5. The element will validate in an HTML5 page, but not in an HTML 4 page.
|
Note that the <embed> element does not have a closing tag. It can not contain alternative text. |
|---|
The <embed> element can also be used to include HTML in HTML:
Or images if you like:
VideosThe easiest way to play videos in HTML, is to use YouTube.
Different versions of different browsers support different video formats.
Earlier in this tutorial, you have seen that you might have to convert your videos to different video formats to make them play in all browsers.
Converting videos to different format can be difficult and time consuming.
An easier solution might be to let YouTube play the videos in your web page.
YouTube will display an id (like XGSy3_Czz8k), when you save (or play) a video.
You can use this id, and refer to your video in HTML.
To play your video on a web page, do the following:
Value 0: the player controls are always visible.
Value 1: the player controls hides automatically when the video plays.
Value 2 (default): If the player has 16:9 or 4:3 ratio, same as 1, otherwise same as 0.
Value 0 (default): the video will not play automatically when the player loads.
Value 1: the video will play automatically when the player loads.
Value 0: Player controls does not display. The video loads immediately.
Value 1 (default): Player controls display. The video loads immediately.
Value 2: Player controls display, but the video does not load before the user initiates playback.
Value 0 (default): the video will play only once.
Value 1: the video will loop (forever).
A comma separated list of videos to play (in addition to the original URL).
YouTube <object> embeds were deprecated from January 2015.
You should migrate your applications to use <iframe> embeds.