在web开发中常常会遇到视频等媒体视频播放的问题，那么就需要一个好用的媒体播放器来提供基础技术支持，而clappr就很好的满足了我们的要求，它是一个Javascript实现的可扩展的Web媒体播放器，功能非常强悍，你可以在GitHub上查看它，下面我们就一起来看一看吧（下面只是截图）！

clappr.js开源媒体播放器是巴西著名的门户网站Globo.com（视频播放器），使用的是基于OSMF的Flash组件。在最近几年的发展过程中，Globo为视频平台陆续添加了不少额外功能，例如：字幕，广告，画中画播放等。然而，由于缺乏针对视频平台进行维护的专门小组，网站工程师之一的FlávioRibeiro越来越感觉这个平台落后和难以应付不断增长的在线访问需求了。特别是今年，世界杯第二次来到足球王国，Globo将面临的是激增的赛事回放点击。有鉴于此，Ribeiro与同事们决定对播放器进行升级改造。在进行一番验证测试后，决定以Clappr为基础再进行其它插件功能开发。

　　Clappr是一款开源可扩展的Web网页视频播放器，容易上手和进行扩展并且有丰富的文档支持。改造后，视频流堆栈由HLS替代为RTMP，回放方式新增了HTML5支持直接播放。

Clappr架构：

　　以基于组件的软件工程理论为指导，Ribeiro团队列出了Clappr三个主要的插件：

　 1.回放插件

　　用于播放某个视频资源。Clappr会遍历所有的回放插件直至找到能正确播放的插件。

　　2. 容器插件

　　每个回放都与一个容器关联。多数情况下一个容器与一个资源回放匹配并被实例化。监听事件包括播放/停止，进度条，水印等等。

　　3. 核心插件

　　该部分插件承载了核心控制功能。例如画中画功能，核心插件能够实例化两个容器，在Z轴方向把次要窗口缩小播放。

　外部插件

　　Clappr的插件生成器能够让开发者非常方便地创建自己的外部插件。Ribeiro利用它创建了BemTV插件，实现了基于回放-容器插件的P2P统计功能。此外，Globo还推出了部分特色插件，例如进度条控制，缩略图浏览等等。

　　技术支持

Traceur：进行EcmaScript 6代码编写；
Browserify：进行模块化加载，类似于node的require()方式；
Karma、Sinon、Mocha功能测试；
Gulpjs:：前端构建工具(创建，上传等等)。

如何使用？

将Javascript标签引入html

<head>
 <script type="text/javascript" src="clappr.min.js"></script>
</head>

使用它创建一个播放器实例

<body>
 <div id="player"></div>
 <script>
 var player = new Clappr.Player({source: "url", parentId: "#player"});
 </script>
</body>

典型示例

由于clappr是可扩展的，所以会有一些非常不错的插件

360视频角度

360视频播放器

npm install clappr clappr-video360

<script type="text/javascript" charset="utf-8" src="clappr.min.js"></script>
<script type="text/javascript" charset="utf-8" src="clappr-video360.min.js"></script>

var p = new Clappr.Player({
 source: 'url',
 plugins: {
 container: [Video360],
 },
 parentId: '#player',
});
// for better usability, disable clappr's click_to_pause plugin
p.getPlugin('click_to_pause').disable();

代码量很少就能实现一个类似于这样的功能

缩略图模式

<head>
 <script type="text/javascript" src="clappr.min.js"></script>
 <script type="text/javascript" src="clappr-thumbnails-plugin.js"></script>
</head>

var player = new Clappr.Player({
 source: "url",
 plugins: {
 core: [ClapprThumbnailsPlugin]
 },
 scrubThumbnails: {
 backdropHeight: 64,
 spotlightHeight: 84,
 thumbs: [
 	{time: 0, url: "url"},
 	{time: 2, url: "url"},
 	{time: 4, url: "url"}
 ]
 }
});

视频进度条标记

<head>
 <script type="text/javascript" src="clappr.min.js"></script>
 <script type="text/javascript" src="clappr-markers-plugin.js"></script>
</head>

var player = new Clappr.Player({
 source: "url",
 plugins: {
 core: [ClapprMarkersPlugin]
 },
 markersPlugin: {
 markers: [
 new ClapprMarkersPlugin.StandardMarker(0, "The beginning!"),
 new ClapprMarkersPlugin.StandardMarker(90, "Something interesting."),
 new ClapprMarkersPlugin.StandardMarker(450, "The conclusion.")
 ],
 tooltipBottomMargin: 17 // optional
 }
});

清晰度调整

<head>
 <script type="text/javascript" src="clappr.min.js"></script>
 <script type="text/javascript" src="level-selector.js"></script>
</head>

var player = new Clappr.Player({
 source: "url",
 plugins: [LevelSelector]
});

你还可以自定义标题等

var player = new Clappr.Player({
 source: "url",
 plugins: [LevelSelector],
 levelSelectorConfig: {
 title: 'Quality',
 labels: {
 2: 'High', // 500kbps
 1: 'Med', // 240kbps
 0: 'Low', // 120kbps
 },
 labelCallback: function(playbackLevel, customLabel) {
 return customLabel + playbackLevel.level.height+'p'; 
 }
 },
});

<head>
 <script type="text/javascript" src="clappr.min.js"></script>
 <script type="text/javascript" src="clappr-stats.min.js"></script>
 <script type="text/javascript" src="clappr-nerd-stats.min.js"></script>
</head>
<body>
 <div id="player"></div>
 <script>
 window.player = new Clappr.Player({
 parentId: '#player',
 plugins: [ClapprNerdStats, ClapprStats],
 // source: 'url',
 source: 'url',
 height: 607.5,
 width: 1080,
 clapprNerdStats: {
 // Optional: provide multiple combination of keyboard shortcuts to show/hide the statistics.
 // Default: ['command+shift+s', 'ctrl+shift+s']
 shortcut: ['command+shift+s', 'ctrl+shift+s'],
 // Optional: position of the icon to show/hide the statistics.
 // Values: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'none'
 // Default: 'top-right'
 iconPosition: 'top-right'
 }
 })
 </script>
</body>

总结：

clappr的最大优点就在于起扩展性，你可以在其基础上通过插件的方式实现更多有趣和实用的功能，而且你还可以自定义UI，或许会给你带来一些惊喜！

内容参考：www.ruanally.com

陪代码一起浪迹天涯

发布了129 篇原创文章 · 获赞 128 · 访问量 24万+

私信关注

clappr.js：Web开源媒体播放器，可扩展网页媒体播放器

如何使用？

典型示例

总结：

猜你喜欢