Web Design Primer

Chapter 7 – Video

Any YouTube fan can attest to the explosion of digital video on the web and how it has revolutionized communication—be it for education, product information, or just sharing personal experiences.

Most digital cameras today can record standard-definition (SD) and high-definition (HD) videos (Table 7-1). Camera types range from cell phones to point-and-shoot, advanced amateur, and single-lens reflex (DSLR) cameras, along with amateur pocket video cams and shoulder-mounted professional models. Higher-level cameras offer more professional features, such as more control over camera settings and stereo recording from an external microphone.

Table 7-1. Video Resolutions
Format Resolution (pixels) Suggested Use
Standard Definition (SD) 640 x 480 iPad, locations where space is limited
High Definition (HD 720) 1280 x 720 small-screen TVs and standard video window on laptops
High Definition (HD 1080) 1920 x 1080 large-screen TVs and full-screen on large monitors

Since digital video consists of a series of bitmapped images, file size limits their length and quality. A video is like a series of Photoshop images at 24–30 per second. If the length and width of the frame are doubled, then the file size quadruples. File size is a major consideration in the length and quality level of the video.

File format is another important consideration (Table 7-2). Choose a format depending upon whether your movie will be played on a Windows, Apple, or tablet computer.

Table 7-2. Video Formats
Format File extension Use
Apple QuickTime .mov MacOS and iOS devices
MP4 .m4v, mp4 MacOS, iOS, and Windows
Windows Movie Player .wmv Windows computers Apple computers with plugin

Video Programs

A video editing program enables you to edit your video by doing such things as:

  • deleting scenes that you don’t want
  • splicing scenes you do want into a continuous sequence
  • adding transitions between scenes
  • adding titles
  • creating special effects, such as time-lapse
  • deleting sound and adding a voiceover (narration)

Video Tags

When coding in HTML5 the <video> tag can be used to insert a video. As with images, the height and width can be specified, along with whether the user has controls (start, pause, stop).


<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">

Apple iMovie

iMovie is an easy-to-use program for basic video editing, provides an appropriate example of a video editing program for a one-semester course in web design.

Opening a Movie

  1. Transfer your unedited movie from your camera to your computer.
  2. Open iMovie and select one of the readymade themes (or No Theme).
  3. Select Import Media and open your unedited movie, which will come into the Clips window.
  4. In iMovie, select the entire clip and move to the editing window.

Deleting Unwanted Footage

  1. In the editing window, place the play head where you want to cut the clip. Placing a marker (M) is a convenient way to evaluate a starting and stopping point. Then select Split Clip (B).
  2. After splitting the clip you can select and delete the sections you don’t want.

Adding Transitions

  1. From the Content Library, select Transitions.
  2. Find the transition you want and drag it in between two clips, or at the end of a clip. In the example, a Fade to Black transition was added to the beginning and end of the movie. The length of the transition can be set in seconds and tenths.

Adding Titles

  1. From the Content Library, select Titles.
  2. Find the title you want and drag to the location where you want it to appear—at the beginning or end of the clip, or in the middle. None of these locations add time to the movie. The title can be placed before the start or after the end of the clip, which lengthens the movie.

Lowering or Deleting Sound and Adding Voiceover

  1. To lower the volume in a clip, select the clip and, using the Volume Adjust control above the play window, reduce the volume 100% to the level you want. The volume can also be faded in and out by dragging the dot above the volume level line in the sound window.
  2. To delete sound, select the clip and then choose Modify > Detach Audio. The audio will appear below the clip as a green line. Select this line and delete.
  3. To add a voiceover, select the clip and move the playhead to the location where you want to start the narration.
  4. Choose Window > Record Voiceover. The microphone icon will appear below the play window.
  5. Click the start button, speak into the microphone, and click stop when finished. The narration will be added to the clip.


  1. To export your edited video, click the Share button (or File > Share), then select File.
  2.  The dialog box offers a choice of resolutions for output, along with an estimate of the file size. Note that file sizes are proportionally larger with HD-720 and HD-1080 than with SD.


Icon for the Creative Commons Attribution 4.0 International License

Web Design Primer Copyright © 2018 by Richard Adams and Ahmed Sagarwala is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.