Clappr.js 开源可扩展的 Web 视频播放器 - 文章教程

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

发布于 2020-10-30 字数 7697 浏览 1676 评论 0

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 还推出了部分特色插件,例如进度条控制,缩略图浏览等等。

技术支持

除了 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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0