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.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/572.html
共0条评论