Video on your web page -- Basics

by Ursula Hoffmann

Requirements: A very large fast hard disk with lots of free space, a very good graphics card, and cables for capturing video, as well as software that lets you capture, edit, and then convert to streaming video. If your video is to include sound, check the requirements for Audio.

1) Windows XP includes Windows Movie Maker. See Create home movies -- http://www.microsoft.com/windowsxp/using/moviemaker/default.mspx, Capturing video with a camcorder -- http://www.peabody.jhu.edu/index.php?pageID=896
Mac's have an equivalent with a cleaner interface, iMovie -- tutorial -- http://www.apple.com/support/imovie/tutorial/

2) Capturing video from TV or VCR or video camera, and editing video. See videotechinfo.

3) The next step might be to convert this to Streaming Video, using, e.g., Real Producer from real.com: http://www.real.com/

Real Producer can be used for recording or converting real media files and for generating control panels that can be embedded into html documents for playing streaming media on the web.

There are lots of tutorials for this software package on the web, in many languages and of varying technical depth. One good one is the Online manual for Real Producer: http://www.homestead.com/prosites-vstevens/files/efi/tutorials/realproducer.htm

Prices range from very little for a basic package to several thousand dollars for a professional version.


Digital video file formats and file sizes:

The computer has to process a huge amount of data – the sound must be reproduced along with each frame of the video itself. Compression helps when you want to send a video file to an end-user’s computer. A one-minute Windows AVI file captured at a resolution of 320x240 pixels with an 8-bit, 22Khz soundtrack has a file size of 10  megabytes  – unacceptable for downloading -- but using various formats for compression, the file size can shrink to a size from 1 MB to 300 kilobytes.

Some Viewers/Browsers/Plug-ins: common formats for transmission of video files:

They are software packages that let you hear sound or see video from within your browser.

The most common formats -- with suffix, suffixes -- are 

Each of these plug-ins works with different file formats and having all of the suffices for basic use. Most of them can also be upgraded, for a fee, for more professional use. But do keep in mind that your targeted audience needs the same plug-in your multimedia file is using.

Check your Netscape Help, About Plug-ins, to see what plug-ins are already installed on your computer, and download or purchase and install any others you may need.

File format(s)
(import/export)		 File type Windows 
Media Player		 RealOne
Player		 Quick
Time		 Winamp
asf Active Stream Format y y
y
aiff AIFF audio -- QuickTime file y y

avi video file -- QuickTime file
 y y y
 y
gif animated GIF file
y y
mpeg MPEG video file y y y y
mpeg2 MPEG2 video (on most DVD discs)



mov
 video file -- QuickTime file

y
png Portable Network Graphics image file
y y
ra, rm, r...
 RealAudio or RealMedia file
y

swf Macromedia Shockwave Flash file
y

wmv Windows Media Video file y

y

Real Player – The video component of the Progressive Networks Real Audio player; it uses compression techniques that reduce the frame rate of the video clip and routines that remove unnecessary information within frames. The quality can vary greatly depending on the amount of motion and detail in the original video. Again, this has the advantage of being one of the more popular video and audio formats at this time and your viewer will likely have the player on their computer. The end user may be able to play the clip at a full screen size. The same free encoder used for audio may be obtained from the Progressive Networks Web site.

Quicktime –
A technology developed by Apple for Macintosh computers and reworked for other computer platforms. The images are of higher quality, but file sizes can be significantly larger than other video storage formats. You can use an application such as Adobe Premiere to convert a file to QuickTime format or your video card may allow you to capture directly in the format. Check options when you create and save the file -- you should make sure that QuickTime movies are “flattened” (a particular arrangement of data in the file) so that they can be viewed on both a Macintosh and a PC.

Macintosh users may directly create Quicktime movies for the Web with Apple's iMovie video editing software package. A sample AVI file used for Real Video and MPEG clips translated to a Quicktime file that ranged between 1.5 and 5 MBs. Smaller file sizes could be achieved (up to 2 MB) by changing the frame size of the movie or using lower quality settings. Quicktime would be most suitable for on-campus users only for good to high quality material.

MPEG, MPEG2 --
High quality format. MPEG on the Internet is limited to fairly short segments and a user will need a player capable of viewing the files. Quality can be quite good with the format; the user has the option of playing the clip full-screen with most MPEG players. MP3, with better compression, can accommodate larger clips. The format, also used on new Digital Video Disks, is ideal for Web pages aimed at campus users because of high quality. Since MPEG is a platform-independent and non-commercial standard, it is emerging as a means for streaming high-quality video on fast networks using special media servers.
When capturing a large number of clips, you may wish to convert them to both Real Video for lower-quality web presentations now and as high-quality MPEG's  to save for use at a later date. A video clip must be captured as an AVI and converted into the MPEG format.

QuickTime AVI and MOV video formats --
High quality format available from camcorders. It can be edited in MS MovieMaker which comes with Windows XT, or in the Mac's iMovie..

New York Times of 5/6/04: Camcorder to DVD

If you have an internal video-capture card or external box that connects your camcorder to your computer, you have a hardware encoder for compressing your camcorder's video data.
If not, you need to get MPEG-2 converter/encoder software to convert/compress data from your video camera for use for a DVD disc -- using MPEG-2 format. 

Selected sites on the web (from results of Google searches for video file formats): 
Windows Media Player multimedia file formats:  http://support.microsoft.com/default.aspx?scid=kb;EN-US;316992
Good chart for video file formats:  http://www.arhu.umd.edu/technology/workshops/mmpublishing/vfileformats.html
Digital video file formats -- the basics:  http://www.crutchfieldadvisor.com/ISEO-rgbtcspd/learningcenter/home/fileformats.html
Digitizing audio and video:  http://www.cit.cornell.edu/atc/materials/dig/videoformats.shtml
Video file formats:  http://www.uwm.edu/~elsmith/videofileformats.html
Graphics guide for web developers:  http://www.walthowe.com/pubweb/gg0.html
digital media file types:  http://www.itl.nist.gov/div895/isis/filetypes.html

Comprehensive lists, including a/v:
File formats and extensions for the Internet (general, incl. a/v):  http://www.learnthenet.com/english/html/34filext.htm
File extensions and how to deal with them (general):  http://www.stack.com/file/extension/  
File sizes:
digital media file sizes -- simplified:  http://msp.sfsu.edu/Instructors/rey/video/bandwidth/filesize.htmlabout digital audio files: sample rates, size etc. -- http://www.arboretum.com/support/manuals/manual_hyp2.5_he/Files/hppc_digital_audio.html file sizes: http://www.cmu.edu/teaching/howto/Digital_Storytelling/size.html
calculate video with audio file size and required disk space: http://www.adobe.com/support/techdocs/6076.htm
compression and data rates:  http://www.adobe.com/support/techdocs/779a.htm video:  http://www.utexas.edu/web/video/examples/qt_tech_specs.php

Miscellaneous:

adding multimedia to Blackboard:  http://www.itd.depaul.edu/website/documentation/AddMultimediaOnBlackboard-QG.pdf

sound and video on web pages:
http://www.abdn.ac.uk/diss/webpack/chap26.hti
http://web.georgetown.edu/media/video.html

multimedia publishing help:  http://www.uri.edu/artsci/langlab/documentation/compress101.html
choosing a format for audio or video for a file to add to your web page: http://www.deliveryourmedia.com/article-lowres-video.html ULead Learning Center:  http://www.ulead.com/learning/video6/page3.htm
Windows Movie Maker tutorial:  http://www.windowsmoviemakers.net/Tutorials/HowToImproveCapture.aspx
web video guidelines:  http://www.utexas.edu/web/video/post_prod.php?e=0 multimedia glossary:  http://staff.ed.uiuc.edu/esecaras/ES/Vanna/glossary.html
Boston U. multimedia glossary:  http://www.bu.edu/webcentral/learning/av/glossary.html

a/v on the web:  http://cts.rice.edu/steps/webav/audiohow.html

digital media file type comparison:  http://www.itl.nist.gov/div895/isis/filetypes.html

last rev. May 2005 -- this document may need to be updated from time to time