HTML5 Media Tutorial and HTML5 Media Reference

Published on: September 9, 2014   Last Updated on : June 8, 2018   Posted By : WebDesignReference

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:

Example : Video Element in HTML

<!DOCTYPE html>
<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:

Example : Audio Element in HTML

<!DOCTYPE html>
<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.

Example : Object Element in HTML

<!DOCTYPE html>
<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.

Example : Embed Element in HTML

<!DOCTYPE html>
<html>
<head>
<title> HTML Embed Example </title>
</head>
<body>
<embed width=”400″ height=”50″ src=”bookmark.swf”>
</body>
</html>

Also Related to HTML5

 

Leave a Reply