Using the <Track> Tag to Add Caption file to Video

You can use the <track> tag in your Canvas HTML. This allows you to deploy captions on a video file that that plays right in line on the page, using the native player built into your browser. You might want to do this if you have video files that you want to keep sequestered in Canvas and don't want hosted on YouTube or offloaded into Kaltura (either for copyright or playback quality reasons).

Here's how to implement the track tag: 

1. Upload the mp4 video to your Canvas course files
2. Upload a .vtt-formatted caption file (YouTube lets you download in this format, as does Amara)
3. Edit a page
4. Switch to the HTML editor.
5. Use the code, below, as a template
6. Change the src URL fragments in the code to match your uploaded files from (1-2), above
7. Save your changes 

The moving parts of the code:

<video controls="controls" width="100%" height="500"><source src="/courses/1215394/files/68493730/download" type="video/mp4" /><track kind="subtitles" label="English subtitles" src="/courses/1215394/files/68493731/download" srclang="en" /></video>

1. The video tag
   1. starts with the word video
   2. controls="controls" makes the controls display for video playback
   3. width="100%" makes the video take up the entire available width for the content container
   4. height="500" sets the video to 500 pixels high
2. The source tag
   1. starts with the word source
   2. src="..." indicates the location of the video file. In this case, the video is located within a Canvas course. You can get this information by placing the target file into your Canvas page and checking the HTML, or by previewing the file in the Files area of your course and copying the URL. Note that you only want the included parts: "/courses/xxxxxxx/files/yyyyyyy/download"
      1. xxxxxxx=the number of your course in Canvas (this is the number in the Canvas URL, not your item number, nor anything from you course catalog)
      2. yyyyyyy=the unique number of the target file in your course (again, you can get this information from the Files area of the course, or by placing the file in a content page and checking the HTML)
   3. type="video/mp4" indicates the file type. There are other types of video files that can be played natively in browsers, but mp4 is the most common. 
3. The track tag
   1. starts with the word track
   2. kind="subtitles" indicates that this is a subtitle track
   3. label="English subtitles" indicates that these are English subtitles. This is readable by people using assistive technology. It's more important if you have multiple track options, but still important to include, regardless.
   4. src="..." This is the location of the caption file. See part 2.b., above. for an explanation of the syntax and how to derive this. 
   5. srclang="en" is the language designation for the track file. The label attribute is friendly, while the srclang attribute is more for machines and sorting. Both are important. 
4. Note that the video tag needs to be closed with </video>