使用方法
1. 在页面中的 body 部分加入播放器元素:
<div id="player"></div>
我们在页面中加入了一个 #player 元素用来加载播放器, 你也可以把 #player 换成别的名字.
2, 加载播放器
直接运行页面, 就可以看到播放效果了.
选项配置
名称 | 默认值 | 描述 |
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
来源: http://www.tuicool.com/articles/3mMniyj