Main Body
Chapter 6 • Video
Videos play an increasingly important role in web design due to the growth of online education and retailing. Students want to learn how things work, and customers appreciate being able to judge the function and relative size and weight of products.
Enabling factors for digital video include faster network speeds, higher capacity and faster disk drives, more powerful processors, and higher quality but lower cost monitors — all have made videos more popular and easier to create and view.
Video Size
Videos are made up of multiple bitmapped images, analogous to moving Photoshop images, and produce very large files. Therefore it’s important to consider the appropriate resolution and length of the video before incorporating it in a web site.
| Common Video Formats | |
|---|---|
| Name | Resolution (px) |
| 720 | 1280×720 |
| HD | 1920×1080 |
| 4K | 3840×2160 |
Video Editing
Editing videos is possible with programs including Apple iMovie and Adobe Premiere. Common video edits include deleting unwanted portions or scenes, combing separate clips of scenes, and adding effects including titles, fade from black at the beginning, fade to black at the end, and transitions between scenes or clips.
The <video> Tag
To place a video in the web page, use the <video> tag:
<video width="1280" height="720">
<source src="video.mp4" type="video/mp4">
</video>
Design Effects for Videos
| Effect | CSS Code |
| center the video in the page | display: block; /* videos by default are inline elements; must set to block to center */ margin: 0 auto; |
| place a border around the video | border: 1px solid darkgray; |
| place a drop shadow under the video | box-shadow: 2px 3px 6px darkgray; |
Large Files
Some free publishing platforms and servers have file size limits which can be a problem for large video files. One workaround is to upload the video to YouTube and then embed the video in the web page.
This 5-min. embedded YouTube video by Toronto Metropolitan University teaching assistant Mary-Anne Buerano explains how to edit videos in both iMovie and Premiere. (Note the design effects applied to the video movie poster.)
Reference Document
How-to Video: rich-adams.net > Completed Tutorials > Video
