当前位置：文江博客话题详情

我应该使用什么来同步 HTML5 视频和内容

发布于 2024-12-02 13:38:13 字数 97 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷路的信 2024-12-09 13:38:14

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

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

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

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

以下示例使用Popcorn 脚注插件可在播放过程中的特定时间在视频下显示一条简单的消息：

<!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/

Popcorn.js is an open source JavaScript library for programming rich interactive experiences with HTML5 Video and Audio elements and provides a very simply API to "display different context-sensitive content during a video playing on a website".

Take a look at the demo gallery here: http://popcornjs.org/demos

Here is a tutorial, build with Popcorn.js, that shows how to create a simple Popcorn.js program: http://popcornjs.org/popcorn-101

The docs can be found here: http://popcornjs.org/api (this is still in progress)

The following example uses the Popcorn Footnote plugin to display a simple message under the video at specific time in during the playback:

<!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>

Working example here: http://jsfiddle.net/rwaldron/6PEU8/

A recent demo shows how you could use an audio element as a slideshow controller, here: http://jsfiddle.net/rwaldron/DjmLM/

回复收藏 0 原文

~没有更多了~