Lesson 1: Adding video to web pages

Overview

HTML5 introduced two new elements that make it easy to add media to web pages, <audio> and <video>. Prior to HTML5, web developers had to rely on browser plug-ins and extensions to add media to web pages, which added a layer of complexity and required users to install special software in order to play the media.

Adding audio and video to web pages is easy with HTML5. In the following activity, you will add a video to your portfolio site. To add video to a web page, you will need three files. The first two files are video files in two different formats. Two formats are needed because the companies who make the major web browsers have been unable to agree on which media formats to support. Microsoft (Internet Explorer) and Apple (Safari) were early supporters of the MP4 format, but Mozilla (Firefox) and Opera were uncomfortable with certain licensing restrictions of MP4 and instead decided to support other formats such as OGG and WebM. Google (Chrome) has been an early supporter of all of these formats. Firefox and Opera have finally agreed to support MP4, but that's a relatively new development. Until we can be reasonably sure that all Web users in the world have a current version of a browser that supports MP4, we have to provide our video in two formats.

(NOTE:) This same issue affects audio as well. Internet Explorer and Safari have historically supported MP3, but in order for audio to play in Firefox and Opera the audio must also be provided in another format such as OGG. And again, Chrome supports all these formats.

The third file to include with your video is a still image file that serves as a placeholder (or "poster") until the user starts playing the video. This is optional, but it's nice to include since it gives the developer (You) control over what appears visibly on your page. Otherwise, the browser will typically show either a black rectangle or a single still frame from early in the video.

Activities

  1. Open the file video.html that you created earlier in the course. At this point, this file should include nothing but "bare bones" HTML.
  2. Be sure the web page has a <title> element that is reflective of the purpose of this page (if you followed the instructions carefully in Unit 2, the title should be something like "Web Portfolio: Your Name's Video Page")
  3. As you may have learned by now in earlier lessons, the title specified using the <title> element does not show up in the body of the document. So, it's a common practice to add this same title, or a similar one, to the body of the document as a main heading, like this:
    <h1>Web Portfolio: Video</h1>
  4. Beneath the main heading, add a short paragraph that introduces the video (just a sentence or two is fine). Remember to wrap your paragraph in opening and closing paragraph tags (<p> and </p>)
  5. Beneath the paragraph, use the following instructions to add a video to the body of your web page. Ask your instructor for the URLs for the two video files and one still poster image.
  6. When finished, save your work, and check it in multiple browsers to be sure it plays. It's important to check it in as many browsers as possible, including at least one browser that supports MP4 (Internet Explorer or Safari) and one that supports WebM (Firefox or Opera).
  7. After you have your video playing in multiple browsers, play with each, and discuss this experience with your class. How does the video controller differ in each browser? Which do you like best, and why? Try tabbing to the video player and operating the controls without a mouse, just using the keyboard. Can you do so? Which browser offers the best user experience for keyboard users?

Instructions for Adding video

  1. Start with an opening and closing video tag (<video> and </video>)
  2. Add the following attributes to the opening <video> tag:
    controls
    This attribute is just the word controls by itself (it has no value). This tells the browser to display its built-in player controls. If you omit this attribute, you can build your own controls using JavaScript (you'll have an opportunity to do this in Unit 5).
    poster="path_to_your_poster_image.jpg"
    This attribute provides a still image for the browser to display before the user plays the video. It can be any image file format that browsers support, such as JPG or PNG.
    preload="auto"
    This attribute tells the browser to preload as much of the video as is necessary to start playing when the user presses play. Instead of "auto", this could be set to "none" so the video doesn't start loading until the user requests it. Since downloading video can cost money for users on mobile phones, setting this to "none" would be respectful of those users, but would also take longer for the video to start playing.
  3. Inside the opening and closing video tags, add two <source> elements, one for each video file format. Each of these elements should have an opening and closing tag (<source> and </source>)
  4. Add the following attributes to each of the opening <source> tags:
    src="path_to_your_video_file"
    This attribute tells the browsers where to find the video file. This attribute will be different for each of your <source> elements: One will point to the MP4 file, and the other will point to the WebM file.
    type="type_of_video_file"
    This attribute tells browsers the video's file type. You might think browsers could figure this out by looking at the extension. However, that isn't necessarily reliable as some files might not have an extension. Most browsers could figure out the file type anyway by analyzing the file itself, but that takes time—it's much more efficient if you just tell the browser what type of file it is. Every file type that's used on the web has a standard type definition that browsers recognize. These are sometimes called MIME Types, and you can find a complete list of all MIME Types in various places on the Internet. Since your videos are available in MP4 and WebM formats, the type that you need to specify in this attribute for each of your source elements is "video/mp4" for the MP4 source and "video/webm" for the WebM source.

All done?

Proceed to the next lesson.