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

Question

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

Ban*_*zor 2 video html5

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

Answer 1

Ric*_*ick 7

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

看看这里的演示库:http://popcornjs.org/demos

这是一个使用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>

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	14 年，9 月前
查看次数：	3049 次
最近记录：	14 年，9 月前