Authoring a GloPAD Video Page:
how to prepare a Web page to hold your video file

 
 
[back to GloPAD video viewing project home]
 
 

Outline:
These instructions show how to put together a Web page to host a Quicktime video for broadcast over the internet. These were developed originally for hosting pages to be uploaded to GloPAD (www.glopad.org).

 
 
  1. Making thumbnail still images
  2. Making a storyboard and/or a fast-forward preview clip (optional, but recommended)
  3. Compiling the Web page
  4. Uploading the finished video page
 
     

I. Making a poster frame image and thumbnail for GloPAD upload -
You will need two still images for this file to go onto GloPAD. The first is a poster frame for the html page display, the second the thumbnail image for the GloPAD DO record. The following steps describe how to make these using Quicktime Pro, but the principles remain the same for whatever video editing software one uses.

  • To make the poster frame image, have your subtitled movie open in Quicktime Pro, and pause it at a point you want to capture (Credits with subtitles showing are good as it gives lots of info to the viewer).
  • Go to the "File" menu and select "Export"
  • On the Export dialog window, select "Movie to Picture" from the "Export" pull-down.
  • Be sure to name your file with the extension .qti and that the "Options" settings are set to JPEG-photo.
  • Save as this poster image to your project folder. This poster image will be the same height and width as the movie, and you'll embed this in the Web page.
  • To make a jpeg thumbnail for the GloPAD record (specs are: height=125pixels, width<200pixels, res=150dpi), you will need to modify the above poster image. I have found that the files exported as JPEG-photo by Quicktime do not open in image editors like Adobe Photoshop or MS PictureIt. So here is my work around to get a .jpeg to resize as a thumbnail.
  • Open the poster image (~.qti file) in Quicktime PictureViewer (which seems to come bundled with Quicktime player). Do this by right clicking the file and selecting "open with" PictureViewer.
  • Once open in PictureViewer, select "Export" from the file menu and save as a jpeg file.
  • Then open and resize that jpeg file in your photo editor.

II. (optional) Making storyboard thumbnail images and/or a preview clip for the GloPAD video page
If the video you are putting into GloPAD is long, consider making a fastforward preview clip and/or a storyboard of still images so that viewers do not have to download and search through the whole video in order to see if it is what they want to view.
The below Web page template for hosting the video includes the options of embedding still thumbnail images as a storyboard of the video scenes and the option of hosting a fastforward preview clip with a link to the download of the full-length video. Here are some instructions for making the files for these two options using Quicktime Pro.

1. making a thumbnail storyboard
The GloPAD video page template has a place for six 100x100 pixel thumbnails so that you can include a storyboard of your video's action. To make these thumbnails one should follow the procedure outlined above for making the jpeg thumbnail for the GloPAD record, making six thumbnails, 100x100 pixel size, of different moments in the video. Use your own judgement of which scenes you capture as still images, pausing the Quicktime Pro playback cursor at the moment you want to capture and using the "export to image" function on the Edit menu to make an image file. Alternately, if you are making a fastforward preview clip (below), you can select six of the still images generated therein and use those for your storyboard thumbnails. Resize the image files using a photo editor. Be sure to name your files in a manner easy for you to later sort when you embed them in the video html page. Save these files to your project folder along with your movie and poster files.
Once you have your six thumbnails, follow the instructions below for embedding them into the storyboard table on the html template.

2. making a fastforward preview clip
To make a clip that fastforwards through the video you will use Quicktime Pro to save still frames of the video at certain intervals and then stitch these frames back together into an image sequence animation.
Open your movie in Quicktime Pro and scrub through the movie to get a sense of how much action there is to capture. Depending on the length of the movie and the action there are two ways to capture the still images you will use for your animated preview:
a) if the movie is not long and the action/scenery is continuous you probably just want to show an image every few seconds. For this you can manually capture still frames at intervals of two or five seconds by pausing the playback and using the "export to image" function (on the File menu). Save your still image files with the same name and contiguous numbering (e.g. yourmovie_still_001, ~_002, ~_003) in a folder by themselves. With this method you judge the exact still frame you capture.
b) if you want to make a full motion animation of the whole at a high speed of action, you can export the whole movie as a sequence of images using the "export image sequence" function on the File menu. Beware that this can generate a large volume of files (e.g. 3500 for a 5-minute movie at 10 frames per second). First create an empty folder to hold the still images. Then select "export" on the File menu of your movie and navigate the save as location to that empty folder. In the "Export Image Sequence Settings" dialog box menu you get upon clicking the "options" button in the "save exported file as" menu, set the export frame per second setting at 1 or 2 by typing in the number. On the selection pull-down list the lowest setting shown is 8 frames per second, but this will usually create too large a set of still images if you have a movie over 15 seconds..

Choose the still image file type you wish to use, and click "OK" and then "Save." The function will automatically number the images in sequence.
To reanimate these images as just a fastforward version you will open the image sequence (see below) in a higher frame rate. (As I said before, this can create a very large file size for long and big videos. One way to make the file smaller is to browse through the generated image files and delete 7 out of 8, 23 out of 24, or 39 out of 40 of them to get your chosen images at 1, 3, or 5 second intervals)

To make your animated preview clip, on the Quicktime Pro File menu select "Open image sequence" and browse until you find the file holding your numbered stills and click on the first one. Another window will open which allows you to specify a frame rate. If you've exported the images at 1 frame per second, importing them at 15 or 25 fps will create a good fast-forward movie. Experiment with the timing to suit your preferences.
If your images are shots in a sequence, you may wish to show them quite quickly, such as 40, 50, or even 60 frames per second to speed up the motion of the original. If you are making a slide show of sorts, your frames per second may be very low. The range is 60 frames per second to 10 seconds per frame, but you should either create a movie at 1 to 10 frames per second or a slide show at 2 or 3 seconds per frame. At two seconds per shot, you will have a slide show with cuts between shots. At 10 frames per second, you will have full motion animation.
Having opened the images as a sequence you can edit the animation as you would any other Quicktime movie, cropping portions or adding tracks as you please. For these preview clips it's best to keep it simple and keep the file size small so that viewers can view it quickly. Once you have the animated movie you want, export the movie at a self-contained movie in mpeg-4 format and save as YOURMOVIE_preview.mov in your project folder. For the preview clips a good size is the hosting page standard of 320 width by 240 height (but you can make it 180x120 for a small movie), with a frame rate of 10 frames per second, and key frames every 24 frames. These are loose specifications and you can play around with the compression and sizing to get what you think best. The object is a small file that gives the viewer an informative preview of the movie.

III. Constructing the html page hosting the subtitled video -
These instructions are only useful for GloPAD subtitled video hosting using Quicktime movies. In the future we will offer other templates for hosting types of audio-visual presentations.
Here you will use a template file and simply replace text with your files and own info to get the hosting html page for the video. This html page is set up to display some info on the video and to launch the subtitled movie in the stand-alone Quicktime player on the viewer's computer.

  • Open in a graphic interface html editor (e.g. Dreamweaver or Composer) or plain text editor (e.g. WordPad, NotePad, or TextPad) this html page template: GloPAD_submovie_template (and save to your project folder the playvideo_button.qti file). There are two other slight design variations you can use: GloPAD_videopage_template_2 and GloPAD_videopage_template_3.
  • In the object tag section for the video, replace the two instances each of YOURMOVIE_poster.qti and YOURMOVIE.mov with the file names of your poster file and your subtitled movie file.
    ** If you choose to use a fast-forward preview clip, put YOURMOVIE_preview.mov file in the YOURMOVIE.mov location; your full-length video (YOURMOVIE.mov) will be linked to the "Play video" button on another part of the page. See below: play full video button.
    If your poster image has different dimensions than 360x270, you should adjust the two instances of width and height.
    Below first is Dreamweaver, below that is the same html editing being done in the text editor WordPAD

  • Then replace the red "Video Title, Info, and Date and Place" text with your own movie information. Note that if you insert text that goes on for more than one line, you should also delete the empty line breaks ( <p>&nbsp;</p> in the html code) below the red text in order to maintain the window formatting. Depending on how much your inserts vary from the placeholders in this template you will have to mess around with the formatting to get the page looking good.
  • If you are not including a storyboard for the video, delete the still image table from the page template and add empty lines as needed to maintain the formatting. To get rid of the storyboard simply delete the table or remove the following html: <table width="300" border="0" cellpadding="0">
    <td><img src="" alt="storyboard image 1" name="storyboard1" width="75" height="75" id="storyboard1" /> </td>
    <td><img src="" alt="Storyboard image 2" name="storyboard2" width="75" height="75" id="storyboard2" /></td>
    <td><p><img src="" alt="Storyboard image 3" name="storyboard3" width="75" height="75" id="storyboard3" /></p> </td>
    </tr>
    <tr>
    <td><img src="" alt="Storyboard image 4" name="storyboard4" width="75" height="75" id="storyboard4" /></td>
    <td><img src="" alt="Storyboard image 5" name="storyboard5" width="75" height="75" id="storyboard5" /></td>
    <td><img src="" alt="Storyboard image 6" name="storyboard6" width="75" height="75" id="storyboard6" /></td>
    </table>
  • If you are including a storyboard for the video--see "making thumbnail storyboard" instructions above--replace the "still image" text in the table with your thumbnail images sized to 75x75 pixels. The width measurement is the more important one here: so long as your thumbnail images are all the same size, 75 pixels width, and close to 75 pixels height, they will look fine and not mess up the formatting of the page. To embed your thumbnails in the storyboard table, insert your image file name between the quotation marks in the <img src="" line, or in an html editor select each image placeholder and browse to and select your file.
  • If you have used a preview clip in the object tag section, you should link your full-length video to the page using the "Play full video " button. To do this, find the html code line for the Play full video button (it will be within an <object> tags, beginning with <object classid="clsid:0~. Simply replace, in both places the "YOURMOVIE.mov" with your full-length movie file name.
  • Save as this html page with your own file name (I suggested just replacing the word "template" in the GloPAD_subtitle_template.htm with your performance piece name). You should save this file to the same folder as the movie file (YOURMOVIE.mov), the poster image file (YOURMOVIE_poster.qti), the playvideo_button.qti file, and the preview movie and storyboard images files if you made them.
  • Try opening this Web page file with your browser to see how it looks.

IV. Uploading your subtitled video page to GloPAD -
To make this Web page presentation work properly on GloPAD's public interface, you need to upload a package of these files you've made as a complex media object (CMO). Special access is needed in order to upload CMOs to GloPAD. For access rights and instructions for CMO upload on the GloPAD Editors' Interface, contact the GloPAC Administrator at glopacadmin[at]cornell.edu.

  back to top / back to GloPAD video viewing project home