UNIT-2
Customizing and Embedding Multimedia Components in Web Pages
Multimedia:
Multimedia is the media that uses multiple forms of information content and information
processing (e.g. text, audio, graphics, animation, video, interactivity) to inform or
entertain the user. 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.
Advantages of Using Multimedia on Web Pages:
Greater Immersion: Adding multimedia elements to a Web page makes it easier to
draw in viewers. While video is the most popular multimedia addition, sites also add
audio and interactive content to attract and hold the attention of the viewers.
Enhanced Page Rankings for SEO: While the value of multimedia remains
controversial in the search engine optimization world, surveys conducted by Forrester
Research indicate that video content, done correctly, is a major benefit to a site's overall
SEO strategy. The company discovered in 2010 that websites with videos were 53
times more likely than text-based websites to appear on the first page of search engine
results.
Better Branding: While HTML text-based sites are more elaborate than websites of
the past, they are still limited in many ways. It is hard to represent a brand's image
without including audio or video content to support it. As such, multimedia sites are
frequently preferred by marketing departments because of their ability to completely
present branding.
Disadvantages of Using Multimedia on Web Pages:
Potential Damage to Search Engine Rankings: While video content can help a site
with search engines, images that are not handled correctly can damage a sites ranking.
Loading Times: While the days of measuring page load times on a slow, dial-up
modem are over, multimedia content still takes longer to load than static content.
Presenting a user who visits a site with a screen that says "Please Wait. Loading"
frequently results in a viewer clicking away to a different page.
Compatibility: Every browser can display at least some subset of HTML. Multimedia
elements not as widely supported. A site that uses the Windows Media format for its
multimedia content will frequently not work correctly for users on computers that lack a
plug-in for Windows Media.
Compatible Multimedia File Formats for Web Pages
i)Images:
1) .gif: GIF, which stands for Graphics Interchange Format, is a graphics file format
originally popularized by CompuServe.
2) .jpg, .jpeg: JPEG stands for Joint Photographic Experts Group. JPG files are true
color (16.7 million colors, or 24-bit) images that are compressed using a lossy
compression algorithm called JPEG. This means that files may degrade in quality when
they are JPEG encoded. However, this degradation is not noticeable for most scanned
photographs and images with smoothly colored areas.
3) .ps, .eps, .epsi: Postscript (PS), Encapsulated Postscript (EPS), and Encapsulated
Postscript with preview image (EPSI) are mainly used to store printed or printable
documents and are in widespread use.
4) .pdf: PDF stands for Portable Document Format and is created by Adobe Acrobat.
PDF files contain all the same text and page layout information but can include many
WWW features such as images, links, and heading references. PDF files can be viewed
using Adobe Acrobat software.
5) .tif, .tiff: TIFF (Tagged Image File Format) files are uncompressed true color images.
Most graphics programs allow you to store TIFFs with compression. These files can be
opened by many graphics programs including xv, Lview, and Photoshop.
6) .tga: TGA (Targa) files, like TIFFs, are uncompressed true color (24-bit) images.
They can be opened by many graphics programs including xv, Lview, and Photoshop.
7) .pict: A PICT file is a standard Macintosh image file format and can be either a raster
image or a vector image, depending on the program that created it. Most Macintosh
applications will open them.
8) .bmp: BMP files are Windows Bitmap files. They are usually 8-bit color images (256
colors) and can be viewed by many programs including Windows Paintbrush. BMP files
can be used as backgrounds for the Windows desktop.
9) .pcx: A PCX is a Zsoft paint file. PCXs are openable by Windows Paintbrush
10) .pbm,.ppm,.pgm: Portable Bitmap, Portable Pixmap, and Portable Graymap are all
file formats used by the PBMtools set of Unix graphics utilities.
11) .psd: PSD signifies an Adobe Photoshop graphic file. They are openable on
Pentium and Macintosh systems by Adobe Photoshop.
12) .cvs: A CVS is a vector graphic file format and is openable by Canvas.
13) .cgm: A Computer Graphics Metafile, CGM, is also a vector format and can be
opened by Canvas and ClarisDraw.
14) .wpg: WPG are WordPerfect graphics files that can be opened with Lview.
15) .wmf: WMF files are Windows MetaFiles that can be opened by Canvas.
16) .xpm, .xbm: X PixMap or X bitmap files are usually small files used in the X Window
System.
ii) Movies
1) .avi: AVI is a file format developed by Microsoft and primarily used in Windows. AVIs
are compressed movies that can be viewed in Windows environments with Media
Player and on Unix workstations with xanim.
2) .flc, .fli: An FLC is an Autodesk Flick movie and is a raw, uncompressed series of
frames. They take up more space than other formats, but the image quality is higher.
You can play them within Windows with Media Player.
3) .mov, .MooV, .qt: Any of these file extensions means that the file is an Apple
Quicktime movie. Applications that can view QuickTime video include: Simple Text,
WordPerfect, and Microsoft Word.
4) .mpg, .mpeg: MPEG files use the MPEG-1 video compression routine, a universal
protocol for creating and displaying time coded data created by the Motion Picture
Experts Group. MPEG video clips can be viewed with mpeg_play on Unix workstations,
Sparkle on Macintoshes, and MPEG_PLAY on IBM-compatible personal computers.
iii) Sound
1) .au: An AU is an audio sound file native to Sun workstations. It is playable by wplany
on Pentium computers or with Netscape's built-in AU player.
2) .iff : An IFF is a sound file playable on Pentium computers with wplany and on Unix
workstations with xanim.
3) .mid, .rmi: MIDI files can be played with the Windows MIDI sequencer. They are
music files that conform to the MIDI standard. Play them with Media Player on the
Pentium computers, or load them into MusicProse or Finale on a Macintosh.
4) .mod: A MOD file is a music file format originally from the Commodore Amiga, but
which is now popular on IBM-compatible computers.
5) .qt: A QuickTime movie can contain just sound and no video. Any program that can
play QuickTime can play QT sound files.
6) .snd: An SND is a Macintosh clickable sound format. It is playable on any Macintosh
and on Pentium computers with wplany.
7) .voc: VOC (voice) files were originally popularized by Creative Labs. They are sound
files similar to WAV. These files are openable on Pentium computers with wplany.
8) .wav: WAV (wave) files are Microsoft's native audio sound format.
They can be played on Pentium computers with Media Player and wplany.
Embedding Audio in Web Pages :
Below Steps should be Processed to Embed the Audio Files:
1) Open the Web page in an HTML editor. HTML editor must have the ability to edit the
source code to follow these steps.
2) Start with an object <object> element
3) We'll add 4 parameters to the object. The first is "src" that tells the browser where to
find the sound file. In this example, the sound file is eureka.wav and is found in the
same directory as the Web page:
<param name="src" value="eureka.wav" />
4) If you want the sound file to play immediately after it's loaded, make the auto start
parameter "true" otherwise make it "false":
<param name="autostart" value="true" />
5) The parameter autoplay is similar to autostart, just used by other browsers, set it the
same as the autostart parameter:
<param name="autoplay" value="true" />
6) Use the controller parameter to tell the browser if a controller should be displayed to
give your readers more control over the sound:
<param name="controller" value="true" />
7) Inside the <object></object> element, add an embed element: <embed />
8) Add the following four attributes that are the same as the parameters to the object:
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True" />
9) Add the correct MIME type for your sound file into the type attribute:
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"
type="audio/wav" />
10) Add the plugins page attribute so that people who don't have the correct plugin for
your sound file can go download it. For WAV files, QuickTime is recommended:
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"
type="audio/wav" pluginspage="http://www.apple.com/quicktime/download/" />
11) When you're done, your HTML should look like this:
<object>
<param name="autostart" value="true">
<param name="src" value="eureka.wav">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"
type="audio/wav" />
</object>
● In Internet Explorer (IE) the audio can be included using <BGSOUND> tag.
bgsound tag works only in IE and not in any other browsers.
Example Code: <bgsoundsrc="he-knows.wav" LOOP="-1" >
Embedding Video in Web Pages :
HTML5 is one of the most straightforward new techniques of video embedment. The
new <video> tag in HTML5 markup allows web developers to add videos into a web
page without any special plugins.
<video width="320"height="240"controls autoplay poster="video.jpg">
<sourcesrc="movie.mp4"type="video/mp4"/>
<sourcesrc="movie.ogg"type="video/ogg"/>
Your browser does not support the video tag.
</video>
Inserting Flash into Web Pages:
To insert Flash into a web page or content management system manually, we must first
upload the SWF file to a web server using a protocol called FTP or through an upload
form on the content management system. Once we have the URL to our SWF file on
the web, we can use the code samples below, simply swapping out somefilename.swf
for our own URL, and change the width and height to the dimensions of our own Flash
project.
The code below can appear complex, but works for all Flash content. Here is the list of
the code:
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
This above block of code uses two primary tags: The <object> tag and the <embed>
tag. The <object> tag is the web standard for embedding content onto a web page, but
the <embed> is a carryover from the days of the Netscape browser, and is not actually
a valid tag in web standards. However, it is still widely used today to embed Flash
content due to its wide compatibility with multiple browsers. Many popular sites like
YouTube still offer embed code follows the above format.
