Popcorn.js简介

最新推荐文章于 2024-11-19 20:30:00 发布

iteye_21000

最新推荐文章于 2024-11-19 20:30:00 发布

阅读量586

点赞数

分类专栏： JavaScript HTML5 文章标签： javascript ViewUI

JavaScript 同时被 2 个专栏收录

5 篇文章

订阅专栏

HTML5

3 篇文章

订阅专栏

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制作工具，使用它可以方便地生成你所需要的效果。