Dynamic Media on the Web

Transcript Dynamic Media on the Web

Dynamic Media on the Web
John H. Krantz
Hanover College
Outline
Slideshows
Creating with ImageJ
Presenting Using Redirects
Video
Background
Editing with QuickTime
Delivering in a Webpage
Why Slideshows
Example 1
Indicate sequence of events
Carries sense of change
Think of Loftus early eyewitness
studies
Billy – sense of momentum in photo
Creating Slideshows with ImageJ
Stacks
Sequence of images to be played
Found under Image menu
Open the desired sequence in order
Images must all be the same size
Image: Stacks: Convert Images to Stack
Editing Stacks
Can add and remove images (a Slice)
under the same menu
Many other editing options do not
work on stacks so edit images before
you make stack.
Save as…Image Sequence
Give convenient name in numerical
order
Why do this in ImageJ
Cannot play in ImageJ so why all of
this work?
Can edit images first
Can preview easily (but only with 1
frame per second at slowest)
Can give convenient name
Put in folder of choice
Can save as Movie
Stack Menu
Can control frame rate under:
Image: Stacks: Animation Options
Determine frame rate
Get AVI writer plugin to save as a
movie or a more current version of
ImageJ (will be under Save As)
File will be huge.
Here is an example
Avi is ~5 meg uncompressed, a t 161
kb compressed but louse image quality
images are ~35 kb each
Slideshows
Can also do slideshows in web pages
Here is an example
Why?
Can be much smaller – faster download
Show sequence – convey more than single
image
Original Loftus Eye Witness testimony was
done this way
How?
One easy way – use redirects
Code for redirect
<html>
<head>
<title>Image Sequence</title>
<META HTTP-EQUIV="refresh" CONTENT="3;
URL=page01.html">
Number is number of seconds before redirect
</head>
<body>

This will change in 3 seconds, about

<img border="0" src="Bobby0000.jpg" width="512"
height="384">
</body>
</html>
Make A slide show
Edit in Text editor
Just edit new page for link
Change image shown
Use Save as
Remove meta tag for last image
A JavaScript Slide Show
Click here
Here is one that has different times
for different images
Use View Source to get the code
Motion Reproduction
Frame rates of monitors far exceed
what is needed for movement update
NTSC video: 30 updates per second
Movies: 24 updates per second
Most web video 10 to 15 frames/sec
Computer Video
Most Update rates are 10-15 frames/sec
5 fps
10 fps
15 fps
Probably not enough for speech and subtle facial
expressions.
Flicker
Critical threshold of flicker rates is
about 60 Hz in the fovea
But gets higher for larger stimuli
Recommended flicker rates between
66 Hz and 120 Hz (Bridgeman, 1998)
Most monitors are adequate in this
value
Notice difference between flicker and
frame update rate.
Wagon wheel effect.
Stimulus Duration
Pixels are not on continuously during
a frame
In part this is necessary for clean motion
Typical CRT phosphors last about 4
msec. (Bridgeman, 1998)
On LCD and other technologies,
persistence is longer
Makes motion less clean but flicker less
noticeable
Differences in Persistence
Fast motion will be less clean on an LCD screen
General Video Issues
Image size
Keep it small
320 x 240 is not
uncommon
Image color depth
Normally full color
Video Length
The 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 zoom
original 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 size
But image quality may be reduced to
get on web
Editing with QuickTime Pro
Open more than one
Basics
Opens 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 marker
Out marker
Selected region
Basic Editing
Selecting a region to edit
Use guides at bottom
Called In and Out Markers
Selected region is darkened
Arrow keys to fine tune
Cut and Paste operation
Paste is at playback head
Adding Tracks
Copy as before
Use Edit: Add – adds the video track
Use Edit: Extract Tracks
Then 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 beginning
Make 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 Text
Use a gif file with a transparent background
Use a text file
File: 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 movie
Delete 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
Duration
For same reason, keep videos short
To Stream or Not to Stream
Steaming
Starts sooner
Can be large files
Can stop
Generally low
quality
General Protocol
RTP/RTSP
Regular Delivery
Wait 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

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80D3488ABDDC6B"
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=“clip.mov">
<EMBED WIDTH="480" HEIGHT="376" CONTROLLER="false"
TARGET="myself" HREF=“clip.mov"
SRC="start.mov" BGCOLOR="FFFFFF" BORDER="0"
PLUGINSPAGE="http://www.apple.com/quicktime/download/indext.
html">
</EMBED>
</OBJECT>

Example: http://ati.fullerton.edu/jkrantz/session3/video/
Assignment
Have Fun!

Dynamic Media on the Web

Transcript Dynamic Media on the Web

Directory