Using Multimedia in Web Pages

CS 318

Multimedia Topics Delivery approaches on the Web Audio formats Video formats Audio/video links on Web pages

Audio/Video Delivery Web server delivery approaches

Non-streaming You store the audio/video clip file on your Web

site User downloads the complete clip from the Web

server to his/her computer Streaming

Clip begins downloading from a Web server Starts playing as soon as enough data has been downloaded

Continues to download in the background until complete or user closes the connection

Non-Streaming Implications

Entire file is downloaded to client workstation Advantages

No risk of delay or interruption during streaming process Your audio/video link isn't dependent on another server You can stop/start/pause clip without reconnecting to the

server The clip is always there when you want it

Disadvantage You have to store the entire audio/video file on your server User has to wait until entire file is downloaded/saved

May be a LONG time for large files…

Streaming Process

Video content is continuously downloaded from a dedicated serverConnection is retained between the server

and client during the entire streaming sessionClient can tell the media server if the data flow

is too fast or slow and the server can adjust its output rate

Streaming Implications Advantages

Good for large audio/video clipsWidely used

YouTube, most clips on popular sites

Only approach for live casts Disadvantage

You are dependent on some else's streaming server…

Topics Delivery approaches Audio formats Video formats Audio/video links on Web pages

Audio Quality Depends On:

Sampling rate: how many pieces of data gathered per second of audioHigher rate = better quality

Sample size: the size of each sampleBigger sample = better quality

Better quality = more data required

CD-Quality Sound:Sample Rate and Size Rate: 44.1 kHZ

44,100 samples/second Size: 4 bytes/sample 1 minute of CD-quality sound =

44,100 samples/second X 60 seconds/minute X 4 bytes/sample = 10.5 megabytes of data/minute of audio Compression can reduce this

Download time: Phone line (56 KB/sec): 25 minutes Cable modem (3 MB/sec): 3.5 seconds

Audio File Formats Uncompressed

Pulse Code Modulation (PCM) Windows .wav, Mac .aiff Large file size (10.5 MB/minute) Good for storing original recordings Stores data for all sounds in a recording

Size of 1 minute of silence = size of 1 minute of music

Lossless compression Provides about 2:1 compression Most popular: True Audio (.tta)

Audio File Formats (continued) Lossy compression

Eliminates parts that are inaudiblePopular formats:

MP3 Real Audio (.ra) WMA (Windows Media Audio) AAC (Advanced Audio Compression)

MPEG Audio Layer 3 (.MP3)

MPEG: Motion Picture Experts Group Approximately 12:1 compression rate

Lossy compression approach, similar to JPEG Retains acceptably high quality

Supports streaming Most popular internet format Requires extra plug-in:

Windows Media Player RealTime QuickTime (Apple)

Real Audio (.RA)

Developed by Real Networks CorporationProprietary

One of the first streaming formats Popular for Webcasts High compression rate (16:1)

Good for voiceNot as good as .MP3 for music

Windows Media Audio (.WMA)

High-quality audio format developed by Microsoft to compete with MP3 and RA

Supports streaming High compression rate (16:1)

Better than .MP3 Quality is as good as .MP3 Size comparisons

Advanced Audio Coding (AAC)

Developed as successor to MP3Better quality with similar file sizes

Used for both non-streaming and streaming

Used by many newer devices iPhone/iPod/iTunes, Wii, PS3

Audio Formats SummaryType Advantages Disadvantages

Pulse Code Modulation (.wav, .aiff)

Uncompressed; highest quality

Very large file size

True Audio (.ta) 2:1 compression ratio; no loss of quality

Still very large files

MP3 12:1 compression ratio; acceptable quality

Some loss of quality

Real Audio (.ra) 16:1 compression ratio Noticeable loss of quality for music from MP3; OK for voice data

Windows Media Audio (.wma)

16:1 compression ratio Quality as good as MP3

Advanced Audio Coding (.aac)

16:1 compression ratio Higher quality than MP3 with same size files

Topics Delivery approaches Audio formats Video formats Audio/video links on Web pages

Video Quality Depends On:

Window size How many pixels are downloaded per frame Bigger window = more pixels

Frames per second More frames = more data = higher quality

Compression rate Video data can be compressed for shipping then decompressed

when it is received Higher compression hurts quality, especially when fast

movement occurs

Uncompressed Video Size and Download Rate Suppose we use 24 bits/pixel = 3 bytes/pixel A 640 x 480 window =

640x480 pixels in a frame = 307,200 pixels X 3 bytes/pixel = 921,000 bytes/frame

For 30 frames/second: 921,000 X 30 = 27.6 MB per second

5-second video clip (approximate): 2 hours on a 56 kbps modem… 9 seconds on a cable modem

Common Video File Formats for Web Pages .avi .mov .wmv .rm .mp4 .swf .flv

All Web-Delivered Video Requires a Special Player Called a "plug-in" Common Web browser plug-ins:

Mac: QuickTimeWindows: Windows Media PlayerRealTime (has both Mac and Windows

versions)Flash

Audio Video Interchange (.avi )

Early video format Not as compressed as more modern

formats Can be played by most common plug-ins

QuickTime Movie (.MOV) Developed by Apple

First released in 1991 Latest version released in 2005

Container file that contains audio and video tracks encoded using standard MPEG techniques Good format for editing OK compression Good image quality Supports streaming

Requires QuickTime player plugin

Windows Media Video (.WMV)

Compressed video file format developed by Microsoft using MPEG-4 standardsRequires high-speed connectionQuality not so good - Images often grainy

Supports streaming Can only be played by Windows Media

Viewer plug-in

Real Media (.rm, .rt, .ra, .ram)

Container file format that contains audio and video encoded using standard MPEG techniquesGood compressionLow image qualitySupports streamingRequires RealTime plug-in

MPEG-4 (.mp4)

Compressed video file format that uses MPEG-4 compression standards Separate audio and video tracksDesigned for slower connections than other

formats Has lower-quality audio than other formats

Can be played by most common plug-ins

Other MPEG Standards MPEG-1 (1993)

Used for Video CD (video on a cd)MP3s are really MPEG-1, Audio Layer 3

MPEG-2 (1995)Used for DVDs, Blu-ray, and Dish Network

MPEG-4 (1998) Internet due to higher compression

MPEG-7/21 (2001)Multimedia, tagging of content

Flash Movies (.swf, .flv)

.swf: Small files, fairly primitive animations .flv: Good format for embedded videos Both require a Flash plug-in

Topics Delivery approaches Audio formats Video formats Audio/video links on Web pages

Delivering Audio and Video on Web Pages Advantages

Gives sites a "high tech" look Can be used to provide audio/video information Gets the user's attention

But use with caution… Problem for low bandwidth (slow) links Often need special players and equipment Can create sensory overload Limits accessibility

ALWAYS provide an easy way to turn off or skip…

Linking Audio and Video Files or Streams To Web Pages Approaches:

As hyperlinks within <a> tags href gives URL or filename of audio/video file Starts a free-floating player

Within an <embed> or <object> tag Embeds the player directly on the Web page Uses a specific player specified by the Web page developer Player must be installed on the user's computer

If the user doesn't have the player installed, the player usually asks the user if he/she wants to install it…

Example Clips Using Hyperlinks

Starts a free-floating player in a new windowCode:

Link to page<body><a href="mike.wmv">Colorado 500 (Video)</a><a href="Dada - I'm Going To Disneyland!.mp3">I'm Going to Disneyland (Audio)</a><a href="http://www.youtube.com/watch?v=EK2jcn2LvR8">YouTube Stream</a></body>

Example Clips Using <embed> and <object> Tags Embeds the player window in the Web page

Link to page

<body><p>Colorado 500 (embedded video)</p><p><embed src="mike.wmv" width="287" height="215" autostart="false"></embed></p><p> I'm sorry, Dave... (2001: A Space Odyssey) (embedded audio)<embed src="sorry_dave.wav" width="291" height="32" autostart="false"></embed></p><p>YouTube Stream</p><p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/EK2jcn2LvR8&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/EK2jcn2LvR8&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></p>

Creating Embedded Multimedia Objects in Dreamweaver Click Insert – Media – Plugin

Choose the fileConfigure the attributesCreates <object> tags and associated parametersYou'll have to research the parameters you need

Problem: doesn't work predictably in all browsers…

Think critically:

What are the advantages/disadvantages of adding audio/video using:hyperlinks<embed> tags<object> tags