Scribd
Upload
30 views10 pages

Multimedia Unit I

The document provides an overview of multimedia on the web, detailing various formats for audio, video, and images, as well as how to embed them using HTML tags like <img>, <iframe>, <audio>, and <video>. It explains the significance of file extensions and attributes for each multimedia element. Additionally, it includes examples of HTML syntax for embedding multimedia content effectively.

Uploaded by

nagashreesr414
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views10 pages

Multimedia Unit I

The document provides an overview of multimedia on the web, detailing various formats for audio, video, and images, as well as how to embed them using HTML tags like <img>, <iframe>, <audio>, and <video>. It explains the significance of file extensions and attributes for each multimedia element. Additionally, it includes examples of HTML syntax for embedding multimedia content effectively.

Uploaded by

nagashreesr414
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Multimedia Basics:

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.

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
.mpeg first popular video format on the web. Not supported anymore in
HTML.

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.

RealVideo .rm RealVideo. Developed by Real Media to allow video streaming


.ram with low bandwidths. Does not play in web browsers.

Flash .swf Flash. Developed by Macromedia. Often requires an extra


.flv component (plug-in) to play in web browsers.

Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported


by HTML.

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


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.

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). Main format for all
electronic music devices like synthesizers and PC sound cards. MIDI
.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 RealAudio. Developed by Real Media to allow streaming of audio with
.ram low bandwidths. Does not play in web browsers.

WMA .wma WMA (Windows Media Audio). Developed by Microsoft. 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 HTML.

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

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. Supported by all
browsers.

HTML images
The HTML <img> tag is used to embed an image in web pages by linking them. It creates a
placeholder for the image, defined by attributes like src, width, height , and alt , and does not
require a closing tag.
There are two ways to insert the images into a webpage:
 By providing a full path or address (URL) to access an internet file.
 By providing the file path relative to the location of the current web page file.
Basic example of the <img> Tag;
<!DOCTYPE html>
<html>
<body>
<img src=”path” alt=”GFGC image”/>
</body>
</html>
 The <img> tag is used to embed an image into the webpage.
 src attribute: specifies the source URL of the image
 alt attribute: provides alternative text for the image
Various HTML <img> Tag attributes
Attribute Description
Src specifies the path to the image file
Alt Provides alternate text for the image
Height Specifies the height of the image
Width Specifies the width of the image
Sizes Specifies image sizes for different page layouts

HTML Iframes
An iframe, or Inline Frame, is an HTML element represented by the <iframe> tag. It
functions as ‘window’ on your webpage through which visitors can view and interact with
another webpage from different source.
Iframes are used for various purposes like:
 Embedding Multimedia: Easily integrate videos, audio, or animations from
platforms like YouTube, etc.
 Include Maps: Embed maps from services like Google Maps directly into your site.
 Loading Forms and Widgets: Incorporate forms or widgets from other sources
without writing complex code.
Syntax:
<iframe src=”URL” title=”description”>
</iframe>

 The src attribute specifies the URL of the document you want to embed.
 Iframes can include videos, maps, or entire web pages from other sources.
Example1 : Basic Iframe Embedding
In this example, an iframe is used to display another webpage within the current webpage.

<! DOCTYPE html>


<html>
<head>
<title> HTML iframe Tag</title>
</head>
<body style=”text-align:center”>
<h2> HTML iframe Tag </h2>
<iframe src=”https:….html” height=”370” width=”400”?
</iframe>
</body>
</html>

In this example:
 src: Specifies the URL of the page to display within the iframe
 width and height: Defines the size of the iframe on your page.

Iframe attributes:
 height – sets the height of the <iframe> element
 width – sets the width of the <iframe> element
 scrolling – controls whether or not the <iframe> should have scrollbars
 name- specifies the name of the <iframe> for targeting its content or for referencing it
in JavaScript
 scr- specifies the URL of the document to embed in the <iframe>
 srcdoc – specifies the HTML content of the page to display in the <iframe>

HTML <map> Tag

The <map> tag is used to define an image map. An image map is an image with clickable
areas that link to different destinations or perform specific actions. The <map> tag is used in
combination with the <img> tag is used in combination with the <img> tag and <area> tags
to create these interactive regions. Each <area> tag within a <map> defines a shape(rectangle,
circle, polygon) and specifies the coordinates for the clickable area.

Syntax:

<map name="mapname">
<area shape="rect" coords="x1,y1,x2,y2"
href="link1.html" alt="Rectangle Area">
<area shape="circle" coords="x,y,radius"
href="link2.html" alt="Circle Area">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..."
href="link3.html" alt="Polygon Area">
</map>
Where –
 <img> Tag: Displays the image and references the <map> using the usemap
attribute.
 <map> Tag: Defines the clickable areas within the image.
 <area> Tag: Specifies the shape, coordinates, link, and description for each
clickable area.
Example: This example demonstrates a simple image map with rectangular clickable
areas.
<!DOCTYPE html>
<html>
<head>
<title>HTML map Tag</title>
</head>
<body style="text-align: center;">
<p>
Click on Images where the
cursor clickable
</p>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/
logsm.png"
alt="Geeks_logo"
usemap="#gfg">

<map name="gfg">
<area href="https://www.geeksforgeeks.org/"
coords="55,76,129,76,128,126,99,126,100,103,82,104,83,125,54,125,51,104"
shape="poly">
</map>
</body>

</html>

Example2
<html>
<body>
<h1>The map and area elements</h1>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more
about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
Attributes

Attribute Value Description

name mapname Required. Specifies the name of the image map

Event Attributes

The <map> tag also supports the Event Attributes in HTML.

Example

<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>

Embed audio in HTML

To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot be added
to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash.
After the release of HTML5, it is possible. This tag supports Chrome, Firefox, Safari,
Opera, and Edge in three audio formats – MP3, WAV, OGG.
Syntax:
<audio>
<source src="file_name" type="audio_file_type">
</audio>
Attributes of <audio> tag
Attribute Value Description

When the page is loaded. It specifies to play audio as soon


autoplay autoplay
as possible.

controls controls It displays audio control.

loop loop It will start the audio again when it is finished.

When the page is loaded audio will be automatically


muted muted
muted.

auto
metadata It specifies how the author thinks the audio will be loaded
preload
when the page is ready.
none

src URL It specifies the URL of the audio file.

Example:
In this example, we will add an audio file to a webpage.
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Embed video in HTML

To embed video in HTML, we use the <video> tag. It contains one or more video sources at
a time using <source> tag. It supports MP4, WebM, and Ogg in all modern browsers.
Syntax
<video>
<source src="file_name" type="video_file_type">
</video>

Attributes of <video> tag


Attribute Value Description

When the page is loaded. It specifies to play video as soon as


autoplay autoplay
possible.

controls controls It displays video control such as play, pause, and stop.

loop loop It will start the video again when it is finished.

muted muted When the page is loaded video will be automatically muted.

poster URL It specifies an image will be shown until video play.

auto
metadat It specifies how the author thinks the video will be loaded
preload
a when the page is ready.
none

src URL It specifies the URL of the audio file.

It specifies the width of the video area. The default value of


width pixels
width is ‘auto’.

It specifies the height of the video area. The default value of


height pixels
height is ‘auto’.

Example:
In this example, we will add a video to our webpage. To add video, we will use the <video>
tag defining source using <source> tag.
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>

You might also like