注册登录

可扩展的H5 Web播放器

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

计算机