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 We...
General Video Issues
 Image size
   Keep it small
   320 x 240 is not
   uncommon
 Image color depth
   Normally full colo...
General Video Issues

 Frame rate: recall difference between
 apparent motion and flicker
   10 to 15 is really fine for m...
Acquiring with a Digital Camera

 Find format of your video camera
   mine is QuickTime
 Can use digital zoom
   original ...
Acquiring with a Digital Camera
 Hold camera still or not?
 Movies are limited in duration
   mine is 30 sec or size of di...
Creating Animations with ImageJ

 Stacks
   Sequence of images to be played
   Found under Image menu
   Open the desired ...
Create Animations with ImageJ

 Stack Menu
   Can control frame rate under:
      Image: Stacks: Animation Options
 Get AV...
Create Animations with ImageJ
 Useful for making a
 slideshow
   A frame rate of 1
   frame per second is
   good
   And a...
Slideshows

 Can also do slideshows in web pages
 In FrontPage it is built in
   Insert: Web Component
     Dynamic Effect...
Slideshows

 Or the following Java Script
   Not limited in number
 These do not stop but can go slower
 than 1 frame per ...
Editing with QuickTime Pro

 Open more than one
 Basics
   Opens MOV, mpg, avi, mp3, etc.
   Get Movie Information on Movi...
QuickTime Pro Interface




Playback head



                                  In marker
                                 ...
Basic Editing

 Selecting a region to edit
   Use guides at bottom
     Called In and Out Markers
   Selected region is da...
Adding Tracks

 Copy as before
   Use Edit: Add – adds the video track
 Use Edit: Extract Tracks
   Then Edit: Add
   Can ...
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...
More Advanced Editing with
QuickTime Pro
 Overlaying Text
   Use a gif file with a transparent background
   Use a text fi...
More Advanced Editing with
QuickTime Pro
 Filtering portions of movie
   Delete regions do not want to filter
   Use the e...
Saving for Web

 Format:
   You must compress
     Uncompressed files will be very large
     Lead very slow download
   D...
To Stream or Not to Stream
 Steaming               Regular Delivery
   Starts sooner          Wait for entire file
   Can ...
Streaming vs. HTTP Fast Start

 HTTP Fast Start is a feature of
 QuickTime
   Allows playing after part of file
   downloa...
Embedding a QuickTime Movie in a
Web Page
<p align="center">
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-
   D3488ABDDC...
Upcoming SlideShare
Loading in...5
×

Video

201

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
201
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Edit Size, src – what start see – invert2 and HREF for both netscape and IE passages Add 15 pixels to vert so controller will be seen – subtract 5 to completely hide Just use SRC if want to start as page loads IE needs whole URL in HREF but not netscape. Target variable keeps the video in the same page. IE SRC can be any thing that QT will open. Netscape seems to want it to be a movie.
  • Video

    1. 1. Video on the Web John H. Krantz Hanover College
    2. 2. Outline What is Video Acquiring with a Digital Camera Creating with ImageJ Editing with QuickTime Delivering in a Webpage
    3. 3. 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 If can’t get movie by clicking on the picture, click here.
    4. 4. 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 If can’t get movies by clicking on the pictures: click here for the left and here for the right.
    5. 5. 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
    6. 6. 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
    7. 7. 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
    8. 8. Create Animations with ImageJ Stack Menu Can control frame rate under: Image: Stacks: Animation Options Get AVI writer plugin to save as a movie
    9. 9. 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 If you can’t get the movie by clicking on the picture, click here.
    10. 10. Slideshows Can also do slideshows in web pages In FrontPage it is built in Insert: Web Component Dynamic Effects: Banner Ad Manager Limited in number of images to 9 Here is an example
    11. 11. Slideshows Or the following Java Script Not limited in number These do not stop but can go slower than 1 frame per second
    12. 12. 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
    13. 13. QuickTime Pro Interface Playback head In marker Out marker Selected region
    14. 14. 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
    15. 15. 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
    16. 16. Deleting Tracks Use Edit: Delete Tracks Remove any unwanted sound from video
    17. 17. 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 past to beginning Another past for each additional frame
    18. 18. 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
    19. 19. 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
    20. 20. Saving for Web Format: You must compress Uncompressed files will be very large Lead very slow download Duration For same reason, keep videos short
    21. 21. To Stream or Not to Stream Steaming Regular Delivery Starts sooner Wait for entire file Can be large files Keep to small files Can stop Keeps Speed Generally low Better quality quality General Protocol RTP/RTSP
    22. 22. 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
    23. 23. 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> The code in a text his here.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×