HTML
Image Map and Multimedia
HTML and Multimedia
• 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 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.
HTML and Multimedia
• The most common video formats are:
The MP4, WebM, and Ogg formats ------- supported by HTML.
The MP4 format is recommended by YouTube.
• The most common video formats are:
• The MP3 , MIDI, WAV, and ogg
• MP3 is the best format for compressed recorded music
HTML Video
• The < video> tag is used to insert video in html pages.
• Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
The <source> element allows to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
HTML Video
• Video attributes:
• To add video controls, like play, pause, and volume, use the controls
attribute.
• To start a video automatically, use the autoplay attribute.
• To let your video start playing automatically but muted, use autoplay +
muted attribute.
• To specify that the video file will start over again, every time when it
is completed use Loop attribute.
.
HTML Audio
• The < audio> tag is used to insert audio in html pages.
• Example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
• The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
HTML Audio
• Audio attributes:
• To add audio controls, like play, pause, and volume, use the controls
attribute.
• To start a audio automatically, use the autoplay attribute.
• To let your audio start playing automatically but muted, use autoplay +
muted attribute.
• To specify that the audio file will start over again, every time when it
is completed use Loop attribute.
HTML Image Maps
The HTML <map> tag defines an image map.
An image map is an image with clickable areas.
The areas are defined with one or more <area> tags.
Example:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<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="Coffee" href="coffee.htm">
</map>
https://www.w3schools.com/html/html_images_imagemap.asp
.
HTML Image Maps
• Image Map attributes:
• The image is inserted using the <img> tag. The only difference from
other images is that you must add a usemap attribute.
• The usemap value starts with a hash tag # followed by the name of the
image map, and is used to create a relationship between the image and
the image map
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
HTML Image Maps
• The <map> element is used to create an image map, and is linked to
the image by using the required name attribute.
• A clickable area is defined using an <area> element.
•rect - defines a rectangular region
•circle - defines a circular region
•poly - defines a polygonal region
•default - defines the entire region
• href specifies the source of target html page when click on
specified area.
HTML Image Maps
The coords for shape="rect" come in pairs, one for the x-axis and one for
the y-axis.
So, the coordinates 34,44 is located 34 pixels from the left margin and 44
pixels from the top.
The coords for shape = “circle”, first locate the coordinates of the center
of the circle,
337,300 Then specify the radius of the circle, 44 pixels.
The coords for shape= “poly”, contains several coordinate points, which
creates a shape formed with straight lines (a polygon).
