clappr是一个开源的Web网页播放器，支持大部分现代浏览器，拥有丰富的扩展插件，如进度条缩略图、标记、播放速率、水印广告、360度视角等。
使用方法
1.在页面中的body部分加入播放器元素：
<div id="player"></div>
我们在页面中加入了一个#player元素用来加载播放器，你也可以把#player换成别的名字。
2、加载播放器
<script src="https://cdn.bootcss.com/clappr/0.2.95/clappr.plainhtml5.min.js"></script>
<script>
var player = new Clappr.Player({
source: "http://clappr.io/highline.mp4",
parentId: "#player"
});
</script>
直接运行页面，就可以看到播放效果了。
选项配置
| 名称 | 默认值 | 描述 |
| width | 视频源宽度 | 播放器宽度，数字和百分比 |
| height | 视频源高度 | 播放器高度，数字和百分比 |
| parentId | ” | 指定关联的播放器容器，即对应的选择器元素，如player |
| autoPlay | true | 页面加载完后自动播放。iphone上不会自动播放 |
| loop | true | 循环播放 |
| mute | false | 视频播放开始时静音 |
| actualLiveTime | true | 在进度栏显示实际播放时间 |
| source | ” | 播放源地址，支持mp4，flv，m3u8等 |
| Poster | ” | 缩略图，开始播放前或暂停时显示的图片 |
| watermark | ” | 水印图片，可以是logo等图片 |
| position | ” | 水印位置，四个方向：bottom-left, bottom-right, top-left and top-right |
| watermarkLink | ” | 水印链接，支持点击跳转 |
| audioOnly | false | 只播放声音音频 |
事件
可以监听播放相关事件：
var player = new Clappr.Player({
events: {
onReady: function() { ... }, //当播放器准备好时
onResize: function() { ... },//当播放器缩放时
onPlay: function() { ... },//当播放时
onPause: function() { ... },//当暂停时
onStop: function() { ... },//当播放停止时
onEnded: function() { ... },//放播放结束时
onSeek: function() { ... },//当查找视频进度时
onError: function() { ... },//当播放出错时
onTimeUpdate: function() { ... },//当播放时间更新时
onVolumeUpdate: function() { ... },//当音量更新时
}
})
或者这样：
player.on(Clappr.Events.PLAYER_PLAY, function() { ... })
扩展
进度栏展示缩略图:
https://github.com/tjenkinson/clappr-thumbnails-plugin/
360度视角：
https://github.com/thiagopnts/video-360
码率切换：
https://github.com/clappr/clappr-level-selector-plugin
更多插件请访问：https://github.com/clappr/clappr/blob/master/doc/EXTERNAL_PLUGINS.md
本文转载于（helloweba）原文地址：https://www.helloweba.net/javascript/572.html
