Clappr.js 开源可扩展的 Web 视频播放器

  • Z时代
  • 2024-01-10
  • 分类：IT

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

Clappr.js 开源可扩展的 Web 视频播放器

技术背景

巴西著名的门户网站 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();

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

缩略图模式

Clappr.js 开源可扩展的 Web 视频播放器

<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
  }
});

清晰度调整

Clappr.js 开源可扩展的 Web 视频播放器

<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';
    }
  },
});

Clappr.js 开源可扩展的 Web 视频播放器

<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

以上是 Clappr.js 开源可扩展的 Web 视频播放器 的全部内容， 来源链接： utcz.com/p/232775.html

回到顶部