HTML5 的<video> 元素让将视频嵌入您的网站与嵌入图片一样简单。并且由于所有主流浏览器都从 2011 年开始支持<video>，它也是让更多人看到您的动态图片的最可靠方式。

HTML5 家族中最近新增的元素是<track> 元素。它是<video> 的子元素，旨在提高视频时间线的可访问性。它的主要用例是添加闭幕式字幕。这些字幕从一个独立的文本文件（一个WebVTT 文件）中加载，并在视频显示的底部显示。Ian Devlin 在这个主题上写了一篇非常棒的文章。

除了字幕，<track> 元素还可以用于任何与视频时间线交互的方式。本文探讨了 3 个示例：章节标记、预览缩略图和时间线搜索。到最后，您将充分了解<track> 元素及其脚本 API，从而构建自己的交互式视频体验。

章节标记

让我们从 DVD 光盘流行的示例开始：章节标记。这些标记可以让观众快速跳转到特定部分。对于像 Sintel 这样的长电影，它特别有用。

本示例中的章节标记位于一个外部 VTT 文件 中，并通过一个具有kind 为 **chapters 的<track> 元素加载到页面中。此轨道设置为默认加载。

接下来，我们使用 JavaScript 加载文本轨道的提示，格式化它们，并在视频下方控制栏中打印它们。请注意，我们必须等到外部 VTT 文件加载完毕。

track.addEventListener('load',function() {
    var c = video.textTracks[0].cues;
    for (var i=0; i
In above code block, we’re adding 2 properties to the list entries to hook up interactivity. First, we set a data attribute to store the start position of the chapter, and second we add a click handler for an external seek function. This function will jump the video to the start position. If the video is not (yet) playing, we’ll make that so:
function seek() {
  video.currentTime = this.getAttribute('data-start');
  if(video.paused){ video.play(); }
};

That’s it! You now have a visual chapter menu for your video, powered by a VTT track. Note the actual live Chapter Markers example has a little bit more logic than described, e.g. to toggle playback of the video on click, to update the controlbar with the video position, and to add some CSS styling.
Preview Thumbnails
This second example shows a cool feature made popular by Hulu and Netflix: preview thumbnails. When mousing over the controlbar (or dragging on mobile), a small preview of the position you’re about to seek to is displayed:

This example is also powered by an external VTT file, loaded in a metadata track. Instead of texts, the cues in this VTT file contain links to a separate JPG image. Each cue could link to a separate image, but in this case we opted to use a single JPG sprite - to keep latency low and management easy. The cues link to the correct section of the sprite by using Media Fragment URIs.Example:
http://example.com/assets/thumbs.jpg?xywh=0,0,160,90

Next, all important logic to get the right thumbnail and display it lives in a mousemove listener for the controlbar:
controlbar.addEventListener('mousemove',function(e) {
  // first we convert from mouse to time position ..
  var p = (e.pageX - controlbar.offsetLeft) * video.duration / 480;

  // ..then we find the matching cue..
  var c = video.textTracks[0].cues;
  for (var i=0; i p) {
          break;
      };
  }

  // ..next we unravel the JPG url and fragment query..
  var url =c[i].text.split('#')[0];
  var xywh = c[i].text.substr(c[i].text.indexOf("=")+1).split(',');

  // ..and last we style the thumbnail overlay
  thumbnail.style.backgroundImage = 'url('+c[i].text.split('#')[0]+')';
  thumbnail.style.backgroundPosition = '-'+xywh[0]+'px -'+xywh[1]+'px';
  thumbnail.style.left = e.pageX - xywh[2]/2+'px';
  thumbnail.style.top = controlbar.offsetTop - xywh[3]+8+'px';
  thumbnail.style.width = xywh[2]+'px';
  thumbnail.style.height = xywh[3]+'px';
});

All done! Again, the actual live Preview Thumbnails example contains some additional code. It includes the same logic for toggling playback and seeking, as well as logic to show/hide the thumbnail when mousing in/out of the controlbar.
Timeline Search
Our last example offers yet another way to unlock your content, this time though in-video search:

This example re-uses an existing captions VTT file, which is loaded into a captions track. Below the video and controlbar, we print a basic search form:

    
    Search


Like with the thumbnails example, all key logic resides in a single function. This time, it’s the event handler for submitting the form:
form.addEventListener('submit',function(e) {
  // First we’ll prevent page reload and grab the cues/query..
  e.preventDefault();
  var c = video.textTracks[0].cues;
  var q = document.querySelector("input").value.toLowerCase();

  // ..then we find all matching cues..
  var a = [];
  for(var j=0; j -1) {
      a.push(c[j]);
    }
  }

  // ..and last we highlight matching cues on the controlbar.
  for (var i=0; i
Three time’s a charm! Like with the other ones, the actual live Timeline Search example contains additional code for toggling playback and seeking, as well as a snippet to update the controlbar help text.
Wrapping Up
Above examples should provide you with enough knowledge to build your own interactive videos. For some more inspiration, see our experiments around clickable hot spots, interactive transcripts, or timeline interaction.
Overall, the HTML5 <track> element provides an easy to use, cross-platform way to add interactivity to your videos. And while it definitely takes time to author VTT files and build similar experiences, you will see higher accessibility of and engagement with your videos. Good luck!
    

                                
About
                          
                Jeroen Wijering              
                      
                      
Creator of the successful JW Player and co-founder of the company with the same name. He is the team's Product Evangelist, driving innovation and market awareness.
                    
www.jwplayer.com
@jeroenw
            
More articles by Jeroen Wijering…
                  
About
                          
                Robert Nyman [Editor emeritus]              
                      
                      
Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and  has been working since 1999 with Front End development for the web - in Sweden and in New York City.

He regularly also blogs at http://robertnyman.com and loves to travel and meet people.
                    
robertnyman.com
@robertnyman
Google+
            
More articles by Robert Nyman [Editor emeritus]…