学步园

clappr是一个开源的Web网页播放器，支持大部分现代浏览器，拥有丰富的扩展插件，如进度条缩略图、标记、播放速率、水印广告、360度视角等。

使用方法

1.在页面中的body部分加入播放器元素：

<p id="player"></p>

我们在页面中加入了一个#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

以上就上有关可扩展的H5Web播放器的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。