可扩展的H5 Web播放器

原创文章 作者:月光光 2018年07月23日 20:02helloweba.net 标签:HTML5  网页播放器 

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条评论