clappr：可扩展网页媒体播放器使用

最新推荐文章于 2024-05-11 09:36:51 发布

small_animation

最新推荐文章于 2024-05-11 09:36:51 发布

阅读量2.2k

点赞数 1

分类专栏： video 组件文章标签： css javascript css3 html5

本文链接：https://blog.csdn.net/small_animation/article/details/105858978

版权

组件同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

video

3 篇文章 0 订阅

订阅专栏

<!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)