media

A variety of multimedia objects can be placed in an HTML document to add functionality and effects. Media objects include sound, video and animation. Media typically require plug-ins or external player applications to be viewed by browsers.

MEDIA ISSUES

File formats

File size/download speed

Compression/quality

Streaming

Browser support/plug-ins

Design considerations

HTML AND MEDIA

The two basic methods of including media in an HTML document are linking (to an external file) and embedding (as an inline element)

Linking with <A>: links to media file (similar to linking to an image) with the anchor tag <A>; opens external player application

<a href="file_url">text or image</a>

Embedding with <EMBED>: inserts object directly into HTML document with the embed tag <EMBED> attributes (or parameters) are specific to each plug-in (see documentation for plug-in)

<embed src="file_url" width="32" height="32" attribute="value"> </embed>

Embedding with <OBJECT>: inserts object directly into HTML document with the object tag <OBJECT> the object element is similar to the embed element with added functionality. According to the W3C the <OBJECT> tag supercedes the <EMBED> tag.

<object classid="url" codebase="url" data="url" type="mimetype"> </object>

SOUND

There are a number of formats for sound used on the web

Format	Description	Extension

AIFF	Audio Interchange File Format; main Mac format	.aiff/.aif
WAV	Wave format; mainWindows format	.wav
MIDI	Musical Instrument Digital Interface; store sequencing info	.midi/.mid
AU	Developed for Sun Microsystems; wide browser support	.au
MP3	MPEG-1 Audio Layer-3; superior compression and quality	.mp3
Shockwave	Shockwave Audio; used in Flash	.swa
RealAudio	Real Audio; streaming audio	.ra/.ram

A link to a WAV file and to an AIFF file

<a href="media/tell-me-about.wav" target="_blank">WAV</a>

An embedded MP3 file

<embed src="media/dylan.mp3" width="128" height="16" name="dylan" autoplay="false"></embed>

Using the Object element

<object> <param name="autostart" value="false"> <param name="src" value="media/sony/funk_factory.wav"> <param name="autoplay" value="false"> <param name="controller" value="true"> <embed src="media/sony/funk_factory.wav" controller="true" autoplay="false" autostart="false" type="audio/wav" /> </object>

An embedded MIDI file

<embed src="media/beethoven8Cm.mid" width="128" height="16" name="beethoven" autoplay="false"></embed>

A background sound that plays automatically on Navigator and Explorer

<embed src="media/noise.mid" autostart="true" hidden="true"></embed> <noembed><bgsound="media/noise.mid"><noembed>

Sound Sample Library

SONY Sound Series Samples
Acoustic Guitar (1600k)	Bill Baswell (248k)	Funk Factory (484k)	Sci-Fi Tribal (196k)

Parameters for controlling audio

Parameter	Values	Result

Autoplay	True or False	Plays the sound as soon as page is displayed
Controller	True or False	Shows a slider that lets user stop, start, forward or rewind sound
Height	Measurement in pixels	Sets the height of controller
Hidden	True or False	Hides the visual indication
Loop	True or False	Plays the sound repeatedly or once
Width	Measurement in pixels	Sets the width of controller

VIDEO

There are a number of formats for video used on the web

Format	Description	Extension

QuickTime	QuickTime movie; wide support	.mov
MPEG	Moving Picture Expert Group; standard compression format	.mpeg/.mpg
AVI	Audio-Video interleaved; Windows format	.avi

A link to a MOV file

<a href="media/suna.mov" target="_blank">MOV</a>

An embedded MOV file

<embed src="media/minsk.mov" width="160" height="130" name="minsky" autostart="false">

Parameters for controlling video

Parameter	Values	Result

Autoplay	True or False	Plays thevideo as soon as page is displayed
Controller	True or False	Shows a slider that lets user stop, start, forward or rewind sound
Height	Measurement in pixels	Sets the height of video & controller
Loop	True or False	Plays the video repeatedly or once
Width	Measurement in pixels	Sets the width of controller

GIF ANIMATION

gif89a files support animation by including multiple gif images and control blocks in a single file. Files are easily created, small (compressed) and widely supported. GIF animations are added, like gif images, with the <IMG> tag.

<img src="media/rainforest.gif" width="466" height="135">

Limitations: image quality, limited transparency, no interactivity, no sound
Design issues: appropriate images, consistent color palette, minimum number of frames, crop images, use transparency
Control issues: frame rates, looping
Browser/Platform issues: gamma, color palette, playback speed
Image slicing: dividing an image into smaller parts and reassembling with HTML tables
allows animation of select parts of image and use of JPEG and gif files
Tweening: automatic calculation of "in between" frames by software

QUICKTIME

QuickTime is a versatile, cross-platform, cross-browser media format. Quicktime supports image, audio, video and interactive movie formats.


<!-- Object tag for Explorer, Embed tag for Navigator -->
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
        WIDTH="160" HEIGHT="144"
        CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
    <PARAM name="SRC" VALUE="sample.mov">
    <PARAM name="AUTOPLAY" VALUE="true">
    <PARAM name="CONTROLLER" VALUE="false">
    <EMBED SRC="sample.mov" 
        WIDTH="160" HEIGHT="144" AUTOPLAY="true" CONTROLLER="false" 
        PLUGINSPAGE="http://www.apple.com/quicktime/download/">
    </EMBED>
</OBJECT>

FLASH AND SHOCKWAVE

Macromedia Flash combines vector graphics, bitmap graphics and sound to create dynamic content. Flash content requires both an authoring tool (Flash application) and a plug-in.

Macromedia Shockwave is a plug-in that plays Macromedia Director content. Director is an authoring tool that supports animation, sound and interactivity (it supports more media types than Flash).