The document discusses considerations for using video on websites. It notes that video requires a lot of bandwidth. Sources of video include shooting with a digital camera, digitizing existing videotapes, importing from CD-ROMs, and using clips from other websites with permission. Video editing software can modify and compress video. Popular video tools include Adobe Premier, Final Cut Pro, and Avid. The size and frame rate of video depends on the user's connection speed. Video must be highly compressed to stream online due to its large file size. Common video file formats are RealPlayer, QuickTime, and Windows Media.

1. Gathering d Preparing
G h i and P i
Multimedia Elements
VIDEO
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

2. Video
Video is not appropriate for every site.
pp p y
Video requires a lot of bandwidth
With more high speed Internet connections – less of a problem
Computers are becoming more like TV
Networks have shows available for viewing online
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

3. Video Sources
Live sources
Shooting video with a digital video camera
Existing videotape
Digitize, edit and save the data
Often you can play the tape into the computer to digitize the data
CD-ROM
Video Clips
Needs to be imported
May need editing
Web sources
Video on the web is typically going to be small and highly
compressed – very low quality.
Get permission from site owner before using
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

4. Video
Video is a series of frames rapidly displayed – which
p y p y
gives the user the illusion of motion.
Video-editing software will allow you to
Adjust
Modify
Recombine
Apply effects
Compress
p
Save in a useable Web format
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

5. Video Tools
Most popular tools:
p p
Adobe Premier
http://www.adobe.com/products/premiere/?ogn=EN_US-
gntray_prod_premiere_home
gntray prod premiere home
Final Cut Pro
http://www.apple.com/finalcutstudio/finalcutpro/
Avid
http://www.avid.com/
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

6. Video Size
Video on the Web usually cannot p y full-screen and
y play
full-motion
For most users, the video display size is dependent
on bandwidth, PC processor speed, and the video
card
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

7. Video Size
The table below illustrates current technology
gy
standards
These standards are for medium-quality video
Connection Bandwidth Size (Pixels) Frame Rate
56K Modem 50 kbs 160 x 120 8
DSL or Cable Modem 500 kbs 320 x 240 12
Ethernet 10 MB 640 x 480
4 4 15
5
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

8. Frame Rate
On TV video plays at 3 frames per second ( p )
p y 30 p (fps)
At this rate, the display is smooth
Video digitized at 30 fps, is HUGE and takes too long to
download
Web video is run at 12-15 fps
Match the frame rate of your video to the technical
y
capabilities of your target audience
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

9. Compression
Many more codecs for video than sound
y
Video must be compressed to flow through the Web
Single Frame of video @ 320 x 240 pixels = 76,800 pixels
If each pixel’s color is represented by a 16-bit number, that’s
1,228,000 bits of data p frame!
, , per
At 15 fps, ONE minute of video would send 1,105,920,000
bits of data across the Internet! Whoooooeeee!
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

10. Video
The more a video file is compressed, the lower the
p ,
quality
Frame rate and size of the viewing screen affect file
size
Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

11. Video
Use one of the three main video systems:
y
Real Player
QuickTime
Windows Media
Wi d M di
File Format File Extension Codecs Application
Real Player .ram RealVideo Any application, wide range of
quality settings
QuickTime Movie .mov Sorenson, Cinepak, Any application, wider range of
Motion JPEG, H 263 DV
JPEG H.263, DV, quality settings
others
Windows Media .asf Windows Media Any application, wide range of
quality settings
Linda C. Morosko, 2008 The Web Wizard’s Guide
to Web Design, James G. Lengel