clappr：可扩展网页媒体播放器使用
它是一个可扩展的Web媒体播放器，在项目中适当的使用可以用来提供基础的项目技术支持
·
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="utf-8">
<title>clappr播放器使用</title>
</head>
<body>
<div id="videoPlayer" style="height: 150px;"></div>
</body>
<script src="https://cdn.bootcss.com/clappr/0.2.95/clappr.plainhtml5.min.js"></script><!-- 引用clappr.js -->
<script type="text/javascript">
var mp4 = "http://clappr.io/highline.mp4";
var playerElement = document.getElementById("videoPlayer");
var player = new Clappr.Player({
source: mp4,
mute: false, //静音为true
width:'100%',
height:'100%',
poster:'http://clappr.io/poster.png', //设置封面图
autoPlay: false,
disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
hideMediaControl: true, //禁用媒体控制自动隐藏
hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值
hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
watermark: 'img/ticket.jpg', //在视频上自动添加水印
position: 'top-right', //水印位置四个角bottom-left，bottom-right，top-left和top-right
watermarkLink: 'http://simple.com',//定义单击水印时打开的URL 未定义不可点击
exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
events: {
onPlay: function() { //当播放时
console.log("播放")
},
onPause: function() { //当暂停时
console.log("暂停")
},
onEnded: function() { //放播放结束时
console.log("结束")
},
onSeek: function() { //当查找视频进度时
console.log("快进/后退")
},
onError: function() { //当播放出错时
alert("播放出错!")
},
onTimeUpdate: function(e) { // e.current - 当前播放时间 e-total - 总时长
console.log(e)
},
}
});
player.attachTo(playerElement); //添加资源到dom中
</script>
</html>
[参考文档]：(https://github.com/clappr/clappr/blob/HEAD/doc/BUILTIN_PLUGINS.md)
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)