HTML5 Media Tutorial: Learn HTML5 Media Elements basic concept, Different Type of HTML5 Media Elements, HTML5 Media Elements Reference Guide, Know what are HTML5 Media Elements, Types, and Formats, HTML5 Multimedia Examples. In this page to learn the HTML5 Multimedia definition, the Purpose of using HTML5 Multimedia, and how to use HTML5 Media Element, Types, Formats on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
What’s HTML5 Multimedia?
HTML5 Multimedia: HTML Multimedia on the web is sound, music, videos, movies, and animations. Multimedia comes in many different formats like Images, music, sound, video, films, animations etc. Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common HTML Video Formats
| Format | File | Description |
|---|---|---|
| MPEG | .mpg .mpeg |
MPEG. Developed by the Moving Pictures Expert Group. Most popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5. |
| AVI | .avi | AVI stands for 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 stands for 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. |
| 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 (plugins) 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, MP4 is supported by Flash Players. |
Common Audio Formats
| 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 file format 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 stands for Windows Media Audio. Developed by Microsoft. Commonly used in music players. Plays well on Windows computers, but not in web browsers. |
| AAC | .aac | AAC stands for 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 operating systems, Macintosh operating systems, 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 with high quality sounds. Supported by all browsers. |
| MP4 | .mp4 | MP4 file format is a video format, but can also be used for audio. MP4 video format is the upcoming video format on the internet. This leads to automatic support for MP4 audio by all browsers. |
Modern Media Elements on the Web: HTML5 <audio> and <video>.
HTML <video> Element: To show a video in a web page, use the <video> element:
<html>
<head>
<title> HTML Video Example </title>
</head>
<body>
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
</body>
</html>
HTML <Audio> Element: To play an audio file in a web page, use the <audio> element:
<html>
<head>
<title> HTML Audio Example </title>
</head>
<body>
<audio controls>
<source src=”cat.ogg” type=”audio/ogg”>
<source src=”cat.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML Plugins
HTML <object> Element: To embed an object in HTML document, use the <object> element. It is used to embed plugins (like Java applets, PDF readers, Flash Players) in HTML. The <object> element can also be used to include HTML in HTML or images or flash files.
<html>
<head>
<title> HTML Object Example </title>
</head>
<body>
<object width=”400″ height=”50″ data=”bookmark.swf”> </object>
</body>
</html>
HTML <Embed> Element: To embed an object in HTML document, use the <Embed> element. It is used to embed HTML in HTML or flash files.
<html>
<head>
<title> HTML Embed Example </title>
</head>
<body>
<embed width=”400″ height=”50″ src=”bookmark.swf”>
</body>
</html>
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.
Also Related to This Page
- HTML5 Attribute Tutorial and HTML5 Attribute Reference
- HTML5 Doctype Tutorial and HTML5 Doctype Reference
- HTML5 Examples – HTML5 Tutorial Examples, HTML5 Reference Examples
- HTML5 Graphics Tutorial and HTML5 Graphics Reference
- HTML5 Media Tutorial and HTML5 Media Reference
- HTML5 Tags Tutorial and HTML5 Tags Reference