Question

我希望在网站上播放的视频中显示不同的上下文相关内容。我正在使用HTML5视频，需要一个JavaScript API来处理事件。我需要控制视频播放器以及对视频中不同的时间间隔做出反应。

Answer 1

Popcorn.js是一个开源JavaScript库，用于使用HTML5视频和音频元素编写丰富的交互式体验，并提供了一个非常简单的API，以“在网站上播放视频时显示不同的上下文相关内容”。

这是一个使用Popcorn.js构建的教程，展示了如何创建一个简单的Popcorn.js程序：http://popcornjs.org/popcorn-101

可以在此处找到文档：http://popcornjs.org/api（这仍在进行中）

以下示例使用Popcorn Footnote插件在播放期间的特定时间在视频下显示简单消息：

<!DOCTYPE html> 
<html> 
<head> 
  <title>Popcorn Simple Example</title> 
  <script src="http://code.jquery.com/jquery.min.js"></script> 
  <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> 

  <script> 
  $(document).bind( "ready", function(){
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
    var pop = Popcorn("#video");


    // add a footnote at 2 seconds
    pop.footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnote-container"
        });

    // play the video right away
    pop.play();

  });
  </script> 
</head> 
<body> 
  <video height="180" width="300" id="video" controls> 
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source> 
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source> 
  <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source> 
  </video> 


<div id="footnote-container"></div> 
</body> 
</html>

这里的工作示例：http://jsfiddle.net/rwaldron/6PEU8/

最近的一个演示展示了如何将音频元素用作幻灯片控制器，在此处：http://jsfiddle.net/rwaldron/DjmLM/

我应该如何使用同步HTML5视频和内容

1 个答案: