Clappr.js 开源可扩展的 Web 视频播放器
Clappr 是一款开源可扩展的Web视频播放器，容易上手和进行扩展并且有丰富的文档支持。改造后，视频流堆栈由 HLS 替代为 RTMP，回放方式新增了 HTML5 直接播放。
技术背景
巴西著名的门户网站 Globo.com（视频播放器），使用的是基于 OSMF 的 Flash 组件。在最近几年的发展过程中，Globo 为视频平台陆续添加了不少额外功能，例如： 字幕，广告，画中画播放等。然而，由于缺乏针对视频平台进行维护的专门小组，网站工程师之一的 Flávio Ribeiro 越来越感觉这个平台落后和难以应付不断增长的在线访问需求了。特别是今年，世界杯第二次来到足球王国，Globo 将面临的是激增的赛事回放点击。有鉴于此，Ribeiro 与同事们决定对播放器进行升级改造。在进行一番验证测试后，决定以 Clappr 为基础再进行其它插件功能开发。
Clappr 架构
以基于组件的软件工程理论为指导，Ribeiro 团队列出了 Clappr 三个主要的插件：
1. 回放插件
用于播放某个视频资源。Clappr会遍历所有的回放插件直至找到能正确播放的插件。
2. 容器插件
每个回放都与一个容器关联。多数情况下一个容器与一个资源回放匹配并被实例化。监听事件包括播放/停止，进度条，水印等等。
3. 核心插件
该部分插件承载了核心控制功能。例如画中画功能，核心插件能够实例化两个容器，在Z轴方向把次要窗口缩小播放。
外部插件
Clappr 的插件生成器能够让开发者非常方便地创建自己的外部插件。Ribeiro 利用它创建了 BemTV 插件，实现了基于回放-容器插件的P2P统计功能。此外，Globo 还推出了部分特色插件，例如进度条控制，缩略图浏览等等。
技术支持
- Traceur：进行 EcmaScript 6 代码编写；
- Browserify：进行模块化加载，类似于 node 的 require() 方式；
- Karma、Sinon、Mocha 功能测试；
- Gulpjs：前端 构建 工具(创建，上传等等)。
除了 PC 端，Globo 正逐步完善移动端的部署，具体请查阅 iOS 或 Anroid。
如何使用
将 JavaScript 标签引入 HTML
<script type='text/javascript' src='clappr.min.js'></script>
使用它创建一个播放器实例
<div id='player'></div>
<script>
var player = new Clappr.Player({
source: 'url',
parentId: '#player'
});
</script>典型示例
由于 clappr 是可扩展的，所以会有一些非常不错的插件
360 角度视频
通过 npm 安装 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
pluginp.getPlugin('click_to_pause').disable();代码量很少就能实现一个类似于这样的功能
缩略图模式
<script type='text/javascript' src='clappr.min.js'></script> <script type='text/javascript' src='clappr-thumbnails-plugin.js'></script>
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'}
]
}
});视频进度条标记
<script type='text/javascript' src='clappr.min.js'></script> <script type='text/javascript' src='clappr-markers-plugin.js'></script>
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
}
});清晰度调整
<script type='text/javascript' src='clappr.min.js'></script> <script type='text/javascript' src='level-selector.js'></script>
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>相关链接
github 地址：https://github.com/clappr/clappr
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论