我想在网站上播放视频时显示不同的上下文相关内容。我正在使用 HTML5 视频并且需要一个 JavaScript API 来处理事件。我需要控制视频播放器并对视频中的不同时间间隔使用react。
最佳答案
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>
这里的工作示例:http://jsfiddle.net/rwaldron/6PEU8/
最近的演示展示了如何将音频元素用作幻灯片 Controller ，此处:http://jsfiddle.net/rwaldron/DjmLM/
关于html - 我应该使用什么同步 HTML5 视频与内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7249444/