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

柔光的暖阳◎ 2021-12-01 13:20 448阅读 0赞

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

![开源视频播放器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70] 开源视频播放器  **clappr.js**

**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

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

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

# **典型示例** #

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

*  360视频角度  
     
    
    ![360视频播放器][360] 360视频播放器

npm install clappr clappr-video360

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

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

*  缩略图模式  
     
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70 1][] clappr.js：Web开源媒体播放器，可扩展网页媒体播放器 [舆管家][Link 1]
    
      
    
    
        <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"}
         ]
         }
        });
 *  视频进度条标记  
     
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70 2][] clappr.js：Web开源媒体播放器，可扩展网页媒体播放器
    
        <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
         }
        });
    
     
 *  清晰度调整
    
    ![clappr.js：Web开源媒体播放器，可扩展网页媒体播放器][clappr.js_Web] clappr.js：Web开源媒体播放器，可扩展网页媒体播放器  [抢客][Link 2]
    
      
    
    
        <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'; 
     }
     },
    });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70 3][] clappr.js：Web开源媒体播放器，可扩展网页媒体播放器 [拓客][Link 3]

<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][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70]: /images/20211201/3500cbb269bd4b9f813cd3c53f5cf74c.png
[Globo.com]: http://www.divjs.cn/resource/126.html
[BemTV]: http://blog.flavioribeiro.com/bemtv-hls-p2p-webrtc/
[Traceur]: https://github.com/google/traceur-compiler
[Browserify]: http://browserify.org/
[Karma]: http://blog.flavioribeiro.com/clappr-an-extensible-media-player-for-the-web/karma-runner.github.io
[Sinon]: http://sinonjs.org/
[Mocha]: http://mochajs.org/
[Gulpjs]: http://gulpjs.com/
[360]: /images/20211201/3b5130acb5e545c19ed7d8c9eebdcfeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70 1]: /images/20211201/06d4f2cc88464f5786726e9022588eef.png
[Link 1]: http://yuqing.gam7.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70 2]: /images/20211201/03c3aec9ce364ba4b8550b068230b1a6.png
[clappr.js_Web]: https://img-blog.csdnimg.cn/20190720163402356.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA==,size_16,color_FFFFFF,t_70
[Link 2]: /images/20211201/6c6a1e2508214d89b0c95736d9538602.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3ODg4NjQ4NA_size_16_color_FFFFFF_t_70 3]: /images/20211201/41ae4f69c01a465fb5c88e87f3d7c14a.png
[Link 3]: http://tuoke.ibixue.com
[www.ruanally.com]: http://www.ruanally.com