clappr是一个开源(BSD 3-clause)的网络媒体播放器,支持IE10+和大部分现代浏览器,拥有丰富的扩展插件,如进度条缩略图、标记、播放速率、动态覆盖物等。

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(1)

1、快速开始

https://github.com/clappr/clappr

下载clappr项目压缩文件,解压把dist文件夹中的文件放到我们项目任意位置。在HTML添加以下脚本:

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(2)

在HTML页面中添加一个容器,并添加以下绝本,创建一个实例。

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(3)

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(4)

2、基本配置选项

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(5)

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(6)

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(7)

查看更多Clappr配置属性,请前往以下地址了解详情。

https://github.com/clappr/clappr/blob/master/doc/BUILTIN_PLUGINS.md

3、监听事件

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(8)

除了使用以上方法监听事件外,还可以通过player.on(Clappr.Events.PLAYER_PLAY, function() { ... })这样的形式监听事件。

4、扩展插件

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(9)

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(10)

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(11)

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(12)

网络媒体播放器是什么?(可扩展的网络媒体播放器clappr)(13)

更多扩展插件,请前往以下地址了解详情。

https://github.com/clappr/clappr/blob/master/doc/EXTERNAL_PLUGINS.md