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…
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
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
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
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…