SBI
Using
Multimedia
Elements
COMPUTER 9 Prepared by: MJ Fernandez
1
Objectives
At the end of the lesson, you should be able to:
1 Describe the different multimedia elements
2 Define the multimedia elements and its attributes
3 Demonstrate how to insert multimedia in HTML.
2
*Information & Images taken from various sites on the internet and is under OER Commons.
What is Multimedia?
Multimedia comes in many different formats. It can be
almost anything you can hear or see.
Examples: Pictures, music, sound, videos, records, films,
animations, and more.
Web pages often contain multimedia elements of different
types and formats. In this chapter you will learn about the
different multimedia formats.
*Information & Images taken from various sites on the internet and is under OER Commons. 3
Multimedia Formats
Objectives
Multimedia elements (like sounds or videos) are stored in media
files.
The most common way to discover the type of a file, is to look at the
file extension. When a browser sees the file extension .htm or
.html, it will treat the file as an HTML file. The .xml extension
indicates an XML file, and the .css extension indicates a style sheet
file. Pictures are recognized by extensions like .gif, .png and .jpg.
Multimedia files also have their own formats and different extensions
like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
*Information & Images taken from various sites on the internet and is under OER Commons. 4
SBI
S
1
HTML image
Image elements and attributes
SBIS
HTML Image
Objectives
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The
<img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
*Information & Images taken from various sites on the internet and is under OER Commons. 6
7
*Information & Images taken from various sites on the internet and is under OER Commons.
Image Formats
Abbreviation File Format File Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
*Information & Images taken from various sites on the internet and is under OER Commons. 8
The src Attribute
Objectives
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that moment, that gets the image from
a web server and inserts it into the page. Therefore, make sure that the image actually stays
in the same spot in relation to the web page, otherwise your visitors will get a broken link
icon. The broken link icon and the alt text are shown if the browser cannot find the image.
*Information & Images taken from various sites on the internet and is under OER Commons. 9
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user
for some reason cannot view it (because of slow connection, an error in the
src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
If a browser cannot find an image, it will display the value of the alt
attribute:
*Information & Images taken from various sites on the internet and is under OER Commons. 10
Objectives
Tip: A screen reader is a software program that reads the HTML code, and
allows the user to "listen" to the content. Screen readers are useful for
people who are visually impaired or learning disabled.
*Information & Images taken from various sites on the internet and is under OER Commons. 11
Image Size - Width and Height
Objectives
You can use the style attribute to specify the width and height of an image.
Alternatively, you can use the width and height attributes:
*Information & Images taken from various sites on the internet and is under OER Commons. 12
Image Size - Width and Height
Objectives
The width and height attributes always define the width and height of the image in
pixels.
Note: Always specify the width and height of an image. If width and height
are not specified, the web page might flicker while the image loads.
*Information & Images taken from various sites on the internet and is under OER Commons. 13
Width and Height, or Style?
Objectives
The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from changing
the size of images:
*Information & Images taken from various sites on the internet and is under OER Commons. 14
15
*Information & Images taken from various sites on the internet and is under OER Commons.
Images in Another Folder
Objectives
If you have your images in a sub-folder, you must include the folder name in the src
attribute:
*Information & Images taken from various sites on the internet and is under OER Commons. 16
Animated Images
Objectives
HTML allows animated GIFs:
Notes on external images: External images might be under copyright. If you do not get permission
to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it
can suddenly be removed or changed.
*Information & Images taken from various sites on the internet and is under OER Commons. 17
SBI
S
2
HTML video
video elements and attributes
SBIS
Video Formats
MP4 is the new and upcoming format for
internet video.
MP4 is recommended by YouTube.
MP4 is supported by Flash Players.
MP4 is supported by HTML5.
*Information & Images taken from various sites on the internet and is under OER Commons. 19
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video
.mpeg format on the web. Used to be supported by all browsers, but it is not supported in
HTML5 (See MP4).
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. (See MP4)
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low
.ram bandwidths. It is still used for online video and Internet TV, but does not play in
web browsers.
*Information & Images taken from various sites on the internet and is under OER Commons. 20
Format File Description
Flash .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to
.flv 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.
NOTE: Only MP4, WebM, and Ogg video are supported by the newest HTML5
standard.
*Information & Images taken from various sites on the internet and is under OER Commons. 21
Playing Videos in HTML
Objectives
Before HTML5, there was no standard for showing videos on a web page.
Before HTML5, videos could only be played with a plug-in (like flash).
The HTML5 <video> element specifies a standard way to embed a video in a web
page.
Browser Support
The numbers in the table specify the first browser version that fully supports the <video>
element.
*Information & Images taken from various sites on the internet and is under OER Commons. 22
The HTML <video> Element
To show a video in HTML, use the <video> element:
*Information & Images taken from various sites on the internet and is under OER Commons. 23
How it Works
Objectives
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.
*Information & Images taken from various sites on the internet and is under OER Commons. 24
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:
Note: Chromium browsers do not allow autoplay in most cases.
However, muted autoplay is always allowed.
*Information & Images taken from various sites on the internet and is under OER Commons. 25
HTML <video> Autoplay
Add muted after autoplay to let your video start playing automatically (but muted):
Note: Chromium browsers do not allow autoplay in most cases.
However, muted autoplay is always allowed.
*Information & Images taken from various sites on the internet and is under OER Commons. 26
HTML Video Formats
Objectives
There are three supported video formats: MP4, WebM, and Ogg. The browser support for the
different formats is:
Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
*Information & Images taken from various sites on the internet and is under OER Commons. 27
SBI
S
3
HTML audio
audio elements and attributes
SBIS
Sound Formats
Format File Description
MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all electronic music
.midi devices like synthesizers and PC sound cards. 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 low
.ram bandwidths. Does not play in web browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, 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 (small files) with high quality.
Supported by all browsers.
NOTE: Only MP3, WAV, and Ogg audio are supported by the newest HTML5
standard.
*Information & Images taken from various sites on the internet and is under OER Commons. 29
The HTML <audio> Element
Objectives
The HTML <audio> element is used to play an audio file on a web page.
To play an audio file in HTML, use the <audio> element:
*Information & Images taken from various sites on the internet and is under OER Commons. 30
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.
NOTE: Only MP3, WAV, and Ogg audio are supported by the newest HTML5
standard.
*Information & Images taken from various sites on the internet and is under OER Commons. 31
HTML <audio> Autoplay
Objectives
To start an audio file automatically, use the autoplay attribute:
Note: Chromium browsers do not allow autoplay in most cases. However,
muted autoplay is always allowed.
*Information & Images taken from various sites on the internet and is under OER Commons. 32
The HTML <audio> Element
Add muted after autoplay to let your audio file start playing automatically (but
muted):
*Information & Images taken from various sites on the internet and is under OER Commons. 33
HTML Audio Formats
Objectives
There are three supported audio formats: MP3, WAV, and OGG. The browser support
for the different formats is:
Browser MP3 WAV OGG
Edge/IE YES YES* YES*
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
*Information & Images taken from various sites on the internet and is under OER Commons. 34
Chapter Summary
Objectives
• Use the HTML <img> element to define an image
• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an image, if it cannot be
displayed
• Use the HTML width and height attributes or the CSS width and height properties to
define the size of the image
• <video> Defines a video or movie
• <audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video>
and <audio>
35
REFERENCE: https://www.w3schools.com/
