Video is all over the web depicting everything from home movies of your neighbor’s hidden talents, amazing pet tricks, citizen reporting, amateur and professional animation,   to machinima, and more. It is amazing that there is such a broad spectrum from which to view, but today more than ever, technology has brought the cost and accessibility of producing video down to the point that even kids are producing and publishing video.

In general, web video is relatively small, merely a fraction of the dimension of cinema-quality video. On streaming services like Youtube, Hulu, and Netflix, high-definition (HD) video is available, but standard-definition (SD) and lower quality video is also available for those on slow networks or mobile devices. Video is compressed to decrease file size and facilitate shorter download/streaming demands for viewers. The trouble is that low resolution compressed video often looks poor. Optimizing video, just as it is with images and audio, is always a compromise between quality and file size.

Let’s take a look at a few examples

Watch these examples. While you’re watching, take notice of various techniques and devices the producers use to tell their stories with video. Fancy special effects aren’t necessary at all!

Remix of the Star Wars Kid

Garden Spinners – By: Eugenia Loli-Queru
Shot with a stock Canon HV20. Edited with Sony Vegas and color graded with Magic Bullet.
Music and video are licensed separately under the Creative Commons “BY” 3.0 license.

Mr. Glasses

Above the Sun

A little video shot by the inspiring minds at Coudal Partners:

Examples of Video Mashups: (a YouTube playlist)

Examples of Kuleshov Effect: (a YouTube playlist) Look further into the Kuleshov Effect and the studies behind it.

What sorts of visual elements did you see in each of these videos? What devices were used to help tell a story in each video?


In this lesson you will learn:

  • Best practices for working with web video
  • Where to source video licensed for use and remix
  • Basic video editing with iMovie, Windows Movie Maker, or similar software


Recommended (but not required):
HTML & CSS pages 209-216


Video Editors

Installed Applications (Paid):

Installed Applications (Free):

Online Apps:

Video Converters:

  • Prism AVI Video Converter – (Supports a range of formats, but the free version converts fewer of them. WIN, MAC)
  • Zamzar – online video format converter (100MB limit)
  • Miro Video Converter – A simple way to convert almost any video to MP4, Ogg Theora, or a specific phone or iPod (requires installation)

Video Encoders:

  • Windows Media Encoder
  • Apple Quicktime Pro
  • Handbrake

Other Software and Techniques for Capturing Motion Graphics

Video can be shot in a number of formats. For web video the following are the most common formats:

  • AVI (Audio Video Interleave, Win)
  • MPG (Part of MPEG-1)
  • SWF (Flash)
  • MOV (Quicktime)
  • MP4
  • WMV

If you are shooting your own video you can control production to achieve better quality recordings.

  • Shoot in the highest resolution possible and your best bets are MOV or AVI file formats, 1080p.
  • It is best to use a tripod and limit camera movement, including panning and zooming. Doing this will help when compressing the video. The less pixels change from frame to frame the more efficient compression will be. For the same reason, fades can increase your final file size.
  • Try to record against a simple background. Busy backgrounds can distract viewers from the subject and also make compression less efficient.
  • 640×480 (SD) or 1280×720 (HD) for 4:3 & 16:9 aspect ratios
  • Audio sampling rate: 44.1KHz for MP3/AAC audio

Components of Video

Aspect ratio – the dimension of the video screen described in width and height. Conventional TV has an aspect ration of 4:3 and HDTV is 16:9

Frame rate – The number of still frames present per second. 24p is the standard for movies. The lowest frame rate that still gives the illusion of motion is 15 frames per second. As frame rates increase the CPU load becomes greater on playback. If you want to maintain a high framerate consider lowering the video dimensions and quality range for smoother playback.

Video Resolution – the size of the video image measured in pixels.

Video Codec – A device or software that enables compression or decompression. The quality of video a codec can achieve depends on the compression format the codec uses.

Video Compression Reduces the quantity of data within the video by redundancy in the stream. Most video compression is lossy. Two common methods of compression are intraframe and interframe compression

Sourcing Existing Video for Use and Remix

Looking for video to use in your own projects? The following resources contain public domain and creative commons licensed work.

Stock Video (paid)

Web Video Best Practices

  • Have a story to tell (this is the most important)
  • Mono audio – When compressing audio within your video keep in mind that 16-bit for music and 8-bit for voice are sufficient sample rates. You can also reduce the frequency rate. Remember that 44.1 kHz is approximately the threshold of human hearing and anything higher is usually used only for master or archival audio. 22.05 kHz is sufficient quality and voice can even be taken down to 11.025 kHz.
  • Reduce high frame rates
  • Keep everything at the highest possible resolution until the final render then render to the target delivery size.
  • In most cases, if you’ve hit 10 minutes, it’s too long (for the purposes of this class)
  • Use the Rule of Thirds to compose and frame your shot. There are some great instructional videos on the Vimeo web site that go into this in detail.
  • Properly light the scene
  • Avoid unnecessary movement of the camera (use a tripod, everyone’s seen The Blair Witch Project), and in both panning and zooming (don’t use it unless it is necessary)


The following tutorial is for an older version of iMovie. If you are on a Mac, or if you decide to use Premiere CC, many of the same concepts will be similar. The interface will look slightly different. A Premiere tutorial follows the iMovie tutorial.

Basic Editing, Effects, and Publishing with iMovie

Editing video involves removing frames from the video which are unnecessary, sequencing the snippets of video and audio clips, and adding transitions and effects where desired. When considering your composition think of what is at your disposal like natural sound, samples of people talking, or voice overs. Think of visuals that will help you tell your story and audio that will help set the tone and move your story along.

I’ll be posting a video editing tutorial here. I think it is safe to assume that some of us are using Macs and others may be using PCs, so I’m not going to mandate that you use a particular piece of software to edit your video. Instead, I’ll talk about general video editing concepts that you will encounter in most video editing software that you will need to understand in order to effectively edit video.

In our video tutorial we will talk about:

  • Importing media
  • Splitting video
  • Editing out unwanted frames
  • Adding audio
  • Adding titles and credits
  • Publishing movie

Are you working on a PC? More information about working with Windows Movie Maker (Vista) can be found here.

Source files for class activity:


  • Ophelia’s Loops (loop pack)” by Uncool Bob, 2007. Licensed under Creative Commons Attribution (3.0) (source found at
  • Discko Tanz by bigbonobo 2009 – Licensed under Creative Commons Attribution Noncommercial (3.0) at

Superman Video Notes (timing notes on source video where I mark edits):
0:01:27.37 – Control panel
0:03:32.43 – Mechanical monster
0:04:00.70 – Robot at window
0:06:05.87 – Creepy face man
0:07:19.73 – Gear and guy
0:07:43.30 – Robots
0:07:52.97 – More robots
0:08:04.40 – Robot fire eyes
0:08:26.03 – Even more robots
0:08:32.00 – Single Robot
0:00:55.47 – Intro ends

Defense Against the Enemy Video Notes (timing on source video):
0:00:20 – Rocket Launch
0:00:13 – Big Gun
0:00:20 – Helicopter
0:00:52 – Talking Head
0:01:30 – Man at Microphone

The Basics of Adobe Premiere

Additional Resources

More than you ever wanted to know about video –

Looking Forward

Please complete Homework Assignment 10 before moving to the next lesson.