CMS 3720 Project 3: Web Video

Creating Video

Using a point-and-shoot camera, phone, or other mobile device, create a two-minute video self-interview in which you answer one of two questions:

  1. Describe a time in your life when your food security was lacking.
  2. Describe a person or family you have known who struggled with food security.

Some tips on creating high-quality interview footage:

  1. Find a quiet place. Bad dialog recording is the most common problem with amateur video.
  2. Find a good background. It should be neither too busy nor too boring.
  3. If possible, lock down the camera on a tripod or stand. "Shaky cam" footage does not compress well for the web. If someone else is holding the camera for you, stress that she/he needs to keep it still.
  4. You'll need LOTS of light, but if you shoot outside, try to avoid direct sunlight.
  5. Speak directly to the camera or to a point just to the side of it.
  6. Orient your body either on the left or right of the frame. (Sitting directly in the center of frame tends to look odd, and it's hard to cut together with other shots.)
  7. Most video is wider than it is tall. If you use a phone or tablet, turn it sideways.

Importing, Editing, and Formatting the Video

Importing to the lab computers

To import footage from your camera to the lab computer's, complete the following steps.

  1. Make sure that your computer is in the "Graphic Design" user account.
  2. Connect your camera to the Firewire or USB port on the front of the computer.
  3. Open iPhoto. You will be prompted to import the movie from the camera.
  4. Once this is complete, use "File > Export > Kind: Original" to export the movie as a QuickTime (.mov) file.

Editing the video using Final Cut Pro X (FCP)

Import the file into FCP and cut unnecessary footage. Add a short title sequence that includes your name and the date.

Once complete, use "Share > Export for HTTP Live Streaming" to export the video as an MP4 file. In the dialog box that opens, select only "broadband" from the options. (Deselect everything else.) Save the resulting files to the Desktop. (You will not use most of these files, so you can delete them.

This process will create two video files in MP4 format: "videoName Broadband High" and "videoName Broadband Low." Use the "videoName Broadband Low" version in your project.

Formatting the video using firefogg and Handbrake

If you followed the steps outlined in the previous section, FCP exported the video as an MP4, which is one of the formats you will use online. In this case, you can skip to the numbered directions below.

If the file is not saved already as an MP4, use Handbrake and the directions on pages 100-06 in Mark Pilgrim's HTML5: Up and Running to transcode the file to MP4. (Pilgrim's book is also available online.)

  1. To create a WebM version of the video, open Firefox and navigate to the firefogg web site. Follow the directions to convert your MP4 file to WebM.
  2. Copy both the WebM and MP4 files to your Flash drive in the "video" folder.
  3. Rename the files so that the file names include only lower case letters and no spaces. For example, "video-name.mp4" and "video-name.webm."

Distributing Video on the Web

Embed the video in a web page using the HTML5 <video> tag and the steps detailed on pages 110-14 in Mark Pilgrim's HTML5: Up and Running. (The book is also available online.).

Pilgrim cites Camen Design's Video for Everybody! technique; Jonathan Neal's Generator will create the necessary VfE code based on your options. Make sure you copy the complete code before pasting it into "Code View" in your page. Note also that you should include the complete URL's pointing to your two video files. The URL's should like this:

http://studentwebs.clayton.edu/sspence3/3720/video/video-name.mp4

This test page is a step in that direction.

See the Project 4 page for additional information and requirements.