Video on the Web

John H. Krantz

Hanover College

Outline

What is Video

Acquiring with a Digital Camera

Creating with ImageJ

Editing with QuickTime

Delivering in a Webpage

General Video Issues

Image sizeKeep it small

320 x 240 is not uncommon

Image color depthNormally full color

Video LengthThe shorter the better

This file is ~ 5.5 meg in QuickTime and it is 17 seconds

General Video Issues

Frame rate: recall difference between apparent motion and flicker

10 to 15 is really fine for most cases

And best you can expect on web

Acquiring with a Digital Camera

Find format of your video camera mine is QuickTime

Can use digital zoomoriginal camera images are much larger than movie images so will be shrunk down

And digital zoom is before movie image

Acquiring with a Digital Camera

Hold camera still or not?Movies are limited in duration

mine is 30 sec or size of disk for 320x240

It is 120 sec if 160x120

Image quality is reasonably good if presented in original sizeBut image quality may be reduced to get on web

Creating Animations with ImageJ

Stacks Sequence of images to be played

Found under Image menu

Open the desired sequence in order

Image: Stacks: Convert Images to Stack

Can add and remove images (a Slice) under the same menu

Create Animations with ImageJ

Stack MenuCan control frame rate under:

Image: Stacks: Animation Options

Get AVI writer plugin to save as a movie

Create Animations with ImageJ

Useful for making a slideshow

A frame rate of 1 frame per second is good

And as slow as can have in ImageJ

Slideshows

Can also do slideshows in web pages

In FrontPage it is built inInsert: Web Component

Dynamic Effects: Banner Ad Manager

Limited in number of images to 9

Here is an example

Slideshows

Or the following Java ScriptNot limited in number

These do not stop but can go slower

Editing with QuickTime Pro

Open more than one

BasicsOpens MOV, mpg, avi, mp3, etc.

Get Movie Information on Movie Menu (ctrl-j in Windows)

Tracks: separate slices of information: played at same time as other tracks

Look under the Edit menu

QuickTime Pro Interface

Playback head

In markerOut marker

Selected region

Basic Editing

Selecting a region to editUse guides at bottom

Called In and Out Markers

Selected region is darkened

Arrow keys to fine tune

Cut and Paste operationPaste is at playback head

Adding Tracks

Copy as beforeUse Edit: Add – adds the video track

Use Edit: Extract TracksThen Edit: Add

Can extract sound this way to a movie

Can add scaled so new track is not length of old movie

Deleting Tracks

Use Edit: Delete Tracks

Remove any unwanted sound from video

More Advanced Editing with QuickTime Pro

Adding text to beginningMake any graphic

Resize to movie size so know how it will look

Select al (ctrl-A)

Then cut and paste to beginning

Another paste for each additional frame

More Advanced Editing with QuickTime Pro

Overlaying TextUse a gif file with a transparent background

Use a text fileFile: Import

Any .txt

Press Option button– Select keyed text

– Change background to white and foreground to text color

– I like changing it to bold

Add tracks as before

More Advanced Editing with QuickTime Pro

Filtering portions of movieDelete regions do not want to filter

Use the export function

Click on Options

Click on Filter

Pick pattern

Use cut and paste to reassemble

Saving for Web

Format:You must compress

Uncompressed files will be very large

Lead very slow download

DurationFor same reason, keep videos short

To Stream or Not to Stream

SteamingStarts sooner

Can be large files

Can stop

Generally low quality

General Protocol RTP/RTSP

Regular DeliveryWait for entire file

Keep to small files

Keeps Speed

Better quality

Streaming vs. HTTP Fast Start

HTTP Fast Start is a feature of QuickTime

Allows playing after part of file downloaded

Fewer stops

No special software

Still keep files relatively small

Some loss of image quality

Embedding a QuickTime Movie in a Web Page<p align="center"><OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-

D3488ABDDC6B" WIDTH="480" HEIGHT="376" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM NAME="src" VALUE="start.mov"><PARAM NAME="controller" VALUE="false"><PARAM NAME="target" VALUE="myself"><PARAM NAME="href"

VALUE="http://psych.hanover.edu/Krantz/test/Invert2.mov"> <EMBED WIDTH="480" HEIGHT="376"

CONTROLLER="false" TARGET="myself" HREF="Invert2.mov" SRC="start.mov" BGCOLOR="FFFFFF" BORDER="0" PLUGINSPAGE="http://www.apple.com/quicktime/download/indext.html"></EMBED></OBJECT>

</p>