Module 6: HTML Video

Overview

This module introduces students to the new HTML5 <video> element for adding video to web pages, as well as the <track> element for adding closed captions or other timed text.

There are several videos provided with this curriculum. All related resources are included in the videos folder. The videos are:

• One introductory video for each of the first seven units of this curriculum. These are the videos that appear on the home page for each unit within the Student version. All resources related to a particular video have the filename unitX plus an extension, where X is the unit number.
• A one-minute video that features popular musicians, professional athletes, and leaders of technology companies encouraging students to learn coding skills. This popular video was produced by code.org and is included in the curriculum with their permission. All resources related to this video have the filename code plus an extension. A longer version of this video, plus additional videos and other resources that can be used to inspired kids to learn computer science, are available on code.org's Promote Computer Science page.

The files associated with each video include:

• MP4 file - the video file, for browsers that support MP4 (e.g., Internet Explorer, Safari, and Chrome)
• WebM file - the video file, for browsers that don't support, or were late to support, MP4 (e.g., Firefox and Opera)
• JPG file - a still image to be used in the poster attribute, as a placeholder that's displayed before the user starts playing the video
• VTT file - the closed caption file in WebVTT format

We recommend having students use the code.org video for this module. However, students could also create their own videos. If they do this, several extra steps would be required but the extra steps would provide excellent additional learning opportunities. The extra steps are:

• Students would need to produce the video. This could be an opportunity to work with video editing software.
• Students would need to convert the video to appropriate formats (MP4 and WebM are preferred for cross-browser compatibility). There are several free or affordable media conversion tools available including Miro Video Converter, which is free and available for Windows, Mac, or Linux.
• Students would need to caption the video. There are several free online tools available for captioning video, each of which has its own tutorials that guide new users through the captioning process. Two of the best tools are Amara and Dotsub. Videos can also be uploaded to YouTube and if desired, set to private, then captioned using YouTube's captioning tool. YouTube even captions video automatically. Often this process results in hilarious inaccuracies, but students can edit these captions with YouTube's captioning tool, which might save time over starting from scratch. Regardless of the tool used, the end product is a caption file. Note that there are several different types of caption files. The format needed for HTML is WebVTT.

Lesson 1: Adding video to web pages

• Estimated time required: 60 - 90 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• This lesson asks students to check their video player in a variety of browsers and compare and discuss their findings. Video is a feature that browsers have chosen to implement very differently from one another, so the more browsers you have available, the more meaningful this exercise will be. At a minimum, students should be able to check their pages in at least one browser that supports each of the video types.
• If video doesn't play, the most common reason is a bad path to the media file. Be sure the path is correct and everything is spelled correctly.
• If video still doesn't play, try it in different browsers to see if it's a browser-specific problem. Keep in mind when testing within a particular browser which media file format that browser supports. For example, if the video isn't working within Internet Explorer, this might be a problem with the MP4 file, but not a problem with the WebM file.
• The fact that the major browser companies couldn't agree on which media format to support can be a topic for interesting group discussion and debate. The controversy brewed for many years, and is explained well in this article in Apple Insider. Who are the good guys in this conflict? Who are the bad guys?

Example Output

When this lesson is complete, students will have added a working (but not yet captioned) video to their to their video.html file.

Lesson 2: Adding captions to video

• Estimated time required: 60 - 90 minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• Browsers have supported HTML5 video for years, but it has taken a long time for captions to catch up. Firefox was the last major browser to support captions (support was finally added in version 33). If captions aren't showing up, check Can I Use WebVTT? to be sure you're using a supporting browser and version.
• If captions still aren't showing up, be sure the <track> element includes the default attribute. This shouldn't be required, but some browsers don't display captions at all without it.
• Google Chrome, as of version 27, would not play captions from a local file—they had to be on a web server. This may or may not still be a problem, but if captions are visible in other browsers but not visible in Chrome, this could be a possible explanation.
• Terrill Thompson, co-author of this curriculum, wrote a Comparison of Browsers on HTML5 Video Accessibility in June 2013, which might be a helpful resource in further understanding how browsers handle captions. Support for captions is rapidly evolving so the issues pointed out in Terrill's article aren't necessarily still issues today.

Example Output

When this lesson is complete, students will have added captions to their video in their video.html file.