Transcript Audio and Video on Web PowerPoint

Audio and Video on the Web
Multimedia for Web Designers
Presentation by Cheryl Deas and Pasha Souvorin
Multimedia
 Can be text, graphics, animation, audio, and video
 Most web authoring applications include multimedia
tools
 Multimedia can help you to better communicate
 Multimedia has many challenges for web designers
2
Multimedia
 Use multimedia sparingly
 Think of how you can use media to communicate
 All media in your site should have a purpose
 The purpose should be to help your site
communicate to it’s audience
3
Multimedia
 Guidelines to follow:
– Understand the affect on bandwidth
– Offer low-bandwidth alternatives
– Avoid requiring plug-ins if possible
– Offer links to appropriate plug-ins as necessary
4
Multimedia
 Use strategies to save bandwidth:
– Compression
– Streaming
– File chunking
– Linking instead of embedding
– Avoid multimedia unless necessary
5
Downloadable vs. Streaming Media
 Downloadable media must be fully downloaded
before users can hear or see it
 Streaming media begins to play as soon as data
begins to stream
– Examples: YouTube, Netflix, RealPlayer
– Requires web developer to set up a streaming
server
6
Animation
 Animated GIFs
– Variation of GIF 89A format
– Sequence of frames that simulate movement
– Created with multiple tools, such as GIMP and
Fireworks
7
Animation
 Flash (.swf)
– Proprietary format belonging to Adobe
– Widely available through free plug-in (flash player)
– Content created in Flash or Fireworks
– High learning curve for designers
– Relatively low file sizes (good for bandwidth)
– .flv variant is a high quality, low bandwidth video
format that can also be streamed
8
Using Animation on the Web
 Benefits of Animation
– Catches a visitors’ attention
– Demonstrates a simple process
– Illustrates change over time
– “Wow” factor
9
Using Animation on the Web
 Animation’s Down Side
– Requires plug-in
– Higher bandwidth than text
– Often distracting, annoying, unnecessary
– .swf format won’t play on iOS devices (iPod,
iPhone, iPad)
10
Using Audio on the Web
 Many users are annoyed if web pages start playing
music for no reason
 Give the user control to be effective
– Embed the audio into a .swf
– Include controls for play, pause, etc.
11
Editing Audio
 Use compressed formats on web pages whenever
possible
– .WAV (Windows) and .AIFF (Mac OS) are
uncompressed
– .mp3 format is compressed
12
Editing Audio
 Audio Editing Software
– Audacity (open source)
– Adobe SoundBooth
– Pro Tools (high-end professional)
13
Editing Audio
 Copyright
– You cannot use any sound files without written
permission from the owner, including sampling
small pieces
– Many music websites violate copyright laws
– Be very careful
– Only original sound is safe
14
Video on the Web
 Requires most bandwidth
 Requires user to have fast connection (US avg.
5MB/s*)
*source: Akamai State of the Internet 2010 Report
15
Video on the Web
 Consider low-bandwidth alternatives
– Animation
– Linking to video hosted elsewhere (YouTube)
instead of embedding video hosted on your site
– Resizing video to be smaller
• 640x480 pixels is the full 480p size (web large)
• 320x240 px is often called web medium
• 160x120 px is often called web small
– Providing small and large versions of videos for
users to choose from
*source: Akamai State of the Internet 2010 Report
16
Video Formats
 Web Video Formats
– .FLV (Adobe) and RealVideo (Real Media)
• Proprietary formats that allow compression and
streaming
• Both require a free plug-in to view
– MPEG-4
• Compatible with lots of computers
• Can be compressed as H.264, which has high quality
and small file sizes
• Requires software to compress (many commercial
and open source choices)
17
Video Formats
 Computer Video Formats (not appropriate for
web delivery)
– .AVI (Windows Video)
– .MOV (QuickTime Video for Macs)
 More Information
– Website Helpers.com: Web Video Demystified
– W3Schools: Multimedia Video Formats
18
Effective Use of Multimedia
 Multimedia should be essential to the web site’s
purpose
– Every website should have a purpose
– The multimedia should be necessary to help the site
accomplish it’s purpose
 Multimedia should help the site communicate
efectively
– Every media communicates differently
– The same message will come across differently
depending on whether you use text, pictures, video,
animation, or sound to share that message
– The multimeia you use should communicate your site’s
message perfectly
19
Effective Use of Multimedia
 Multimedia should be integrated into the design of
the site
– Multimedia shouldn’t just appear on top of your site’s
style
– It should be integrated into the design of the site
– Multimedia, when used effectively, should be part of how
your site works, it should feel like it belongs
 Web Resources
– Smashing Magazine: 10 Principles of Effective Web
Design
– Smart Webby: Web Design Tips
20