Popcorn.js简介
史昀
Mozilla近期发布了popcorn.js V1.2。这个JavaScript库允许用户便捷的在audio,video等多媒体元素和其他页面元素之间进行交互。
入门也是相当的简单：
1. 首先在html中引入popcorn.js
<html>
<head>
<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
</head>
<body>
</body>
</html>2. 接下来，添加audio或video到页面中（使用HTML5 video/audio）
<html>
<head>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
</head>
<body>
<video height="180" width="300" id="ourvideo">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>
<div id="footnote"></div>
</body>
</html>关于HTML5 Video的当前状况，请移步阅读此篇文章：The State of HTML5 Video.
3. 然后，就可以创建Popcorn实例来实现你想要的feature了。
<script>
document.addEventListener( "DOMContentLoaded", function() {
var popcorn = Popcorn( "#ourvideo" );
popcorn.footnote({
start: 2,
end: 5,
target: "footnote",
text: "Pop!"
});
}, false );
</script> 在这里 Popcorn("#ourvideo")创建了一个Popcorn实例，它的参数表示我们要操作的对象是id为ourvideo的video元素。然后调用footnote()插件在页面的特定区域添加相应的文本。
Mozilla还提供了一个便捷的在线可视化Popcorn制作工具，使用它可以方便地生成你所需要的效果。
类似资料：