HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and

animations.

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything
you can hear or see, like images, music, sound, videos, records, films,
animations, and more.

Web pages often contain multimedia elements of different types and

formats.

Browser Support
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, fonts, images, and
multimedia!

Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file
extension.

Multimedia files have formats and different extensions

like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats
There are many video formats out there.

The MP4, WebM, and Ogg formats are

supported by HTML.

The MP4 format is recommended by YouTube.

Format File Description

MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group.

The first popular video format on the web. Not supported

in HTML.
.mpe
g

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 browser

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 browser

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 RealVideo. Developed by Real Media to allow

video streaming with low bandwidths. Does not play in we

.ram

Flash .swf Flash. Developed by Macromedia.

Often requires an extra component (plug-in) to play in we

.flv

Ogg .ogg Theora Ogg. Developed by the [Link] Foundation.

Supported by HTML.

WebM .web WebM. Developed by Mozilla, Opera, Adobe, and Google.

m
Supported by HTML.

MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group.

or MP4
Commonly used in video cameras and TV hardware.

Supported by all browsers and recommended by YouTube

Note: Only MP4, WebM, and Ogg video are supported by the HTML
standard.

ADVERTISEMENT

REMOVE ADS

Common Audio Formats

MP3 is the best 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 (Musical Instrument Digital Interface).

.mid
i Main format for all electronic music devices like synthesizers

PC sound cards.

MIDI files do not contain sound, but digital notes that can be

electronics. Plays well on all computers and music hardware

in web browsers.

RealAudio .rm RealAudio. Developed by Real Media to allow streaming of a

.ra
m with low bandwidths. Does not play in web browsers.

WMA .wm WMA (Windows Media Audio). Developed by Microsoft. Plays

a
Windows computers, but not in web browsers.

AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the d

format for iTunes. Plays well on Apple computers, but not

in web browsers.

WAV .wa WAV. Developed by IBM and Microsoft. Plays well on Window
v
Macintosh, and Linux operating systems. Supported by HTM
 Ogg .ogg Ogg. Developed by the [Link] Foundation. Supported by H

MP3 .mp MP3 files are actually the sound part of MPEG files. MP3 is th
3
popular format for music players. Combines good compressi

(small files)

with high quality. Supported by all browsers.

MP4 .mp MP4 is a video format, but can also be used for audio.
4
Supported by all browsers.

Note: Only MP3, WAV, and Ogg audio are supported by the HTML
standard.

HTML Video

The HTML <video> element is used to show a video on a web page.

Video
Example
Courtesy of Big Buck Bunny:

The HTML <video> Element

To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

How it Works
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 page might flicker while the video loads.

The <source> element allows you to specify alternative video files which
the browser may choose from. The browser will use the first recognized
format.

The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

Note: Chromium browsers do not allow autoplay in most cases. However,

muted autoplay is always allowed.

Add muted after autoplay to let your video start playing automatically (but
muted):
Example
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

Browser Support
The numbers in the table specify the first browser version that fully
supports the <video> element.
HTML Video - Methods, Properties,
and Events
The HTML DOM defines 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.

Example: Using JavaScript

Play/Pause Big Small Normal

Video courtesy of Big Buck Bunny.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Video Tags
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

HTML Audio

The HTML <audio> element is used to play an audio file on a web

page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

Example
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio - How It Works
The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which
the browser may choose from. The browser will use the first recognized
format.

The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute:

Example
<audio controls autoplay>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Note: Chromium browsers do not allow autoplay in most cases. However,

muted autoplay is always allowed.

Add muted after autoplay to let your audio file start playing automatically
(but muted):

Example
<audio controls autoplay muted>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Browser Support
The numbers in the table specify the first browser version that fully
supports the <audio> element.

HTML Audio - Media Types

File Format Media Type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav
HTML Audio - Methods, Properties,
and Events
The HTML DOM defines 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 HTML Audio/Video DOM Reference.

HTML Audio Tags

Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media elements, such as

<video> and <audio>

HTML Plug-ins

Plug-ins are computer programs that extend the standard

functionality of the browser.

Plug-ins
Plug-ins were designed to be used for many different purposes:

 To run Java applets

 To run Microsoft ActiveX controls
 To display Flash movies
 To display maps
 To scan for viruses
 To verify a bank id

Warning !

Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern
browsers.

The <object> Element

The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML

document.

It was designed to embed plug-ins (like Java applets, PDF readers, and
Flash Players) in web pages, but can also be used to include HTML in
HTML:

Example
<object width="100%" height="500px" data="[Link]"></object>

Or images if you like:

Example
<object data="[Link]"></object>

ADVERTISEMENT

REMOVE ADS
The <embed> Element
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.

Example
<embed src="[Link]">

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:

Example
<embed width="100%" height="500px" src="[Link]">

HTML YouTube Videos

The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats?

Converting videos to different formats can be difficult and time-
consuming.

An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a
video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

 Upload the video to YouTube

 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the
player
 Add any other parameters to the URL (see below)

Example
<iframe width="420" height="315"
src="[Link]
</iframe>

YouTube Autoplay + Mute

You can let your video start playing automatically when a user visits the
page, by adding autoplay=1 to the YouTube URL. However, automatically
starting a video is annoying for your visitors!

Note: Chromium browsers do not allow autoplay in most cases. However,

muted autoplay is always allowed.

Add mute=1 after autoplay=1 to let your video start playing automatically
(but muted).

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="[Link]
autoplay=1&mute=1">
</iframe>
 ADVERTISEMENT

REMOVE ADS

YouTube Playlist
A comma separated list of videos to play (in addition to the original URL).

YouTube Loop
Add playlist=videoID and loop=1 to let your video loop forever.

loop=0 (default) - The video will play only once.

loop=1 - The video will loop (forever).

YouTube - Loop forever

<iframe width="420" height="315"
src="[Link]
playlist=tgbNymZ7vqY&loop=1">
</iframe>

YouTube Controls
Add controls=0 to NOT display controls in the video player.

controls=0 - Player controls does not display.

controls=1 (default) - Player controls is displayed.

YouTube - Controls
<iframe width="420" height="315"
src="[Link]
</iframe>