Audio and Video on Web PowerPoint

Download Report

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