Clappr是一款可扩展的网络媒体播放器。您的体系结构主要被投影到插件中，通过设计为项目增加了低耦合，并且可以轻松地添加无限多的功能。
Clappr默认使用HTMLVideoElement，这保证了对许多平台的支持。您可以扩展默认的HTML5播放或播放界面来创建一个新的媒体支持，就像插件一样！
支持格式：mp4、hls（直播貌似兼容不好）、rtmp （直播或点播）、dash、 ogg、webm
使用方法：
1.在“<head>”标签中间引入核心clappr.min.js，这里我们分享两个cdn链接
https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.jshttps://lib.baomitu.com/clappr/0.4.5/clappr.min.js2.在“<body>”标签中间引入如下代码：
<div id="player"></div>
<script>
var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
</script>
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>视频播放器</title>
<script src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
<style type="text/css">
html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
</style>
</head>
<body>
<div id="player"></div>
<script type="text/javascript">
var player = new Clappr.Player({
source: "https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8",
poster: "https://img.alicdn.com/tfs/TB1t5NHlgoQMeJjy1XaXXcSsFXa-1920-1080.jpg",
gaAccount: 'UA-44332211-1',
gaTrackerName: 'MyPlayerInstance',
watermark: "logo.png",
hideVolumeBar: true,
position: 'top-right',
parentId: "#player",
height: 600,
width: 1138
});
</script>
</body>
</html>注：clappr HTML5视频播放器兼容性还是很不错的，支持的格式也多，更多开发文档请参考Github！
公告： 本站提供的源码、模板、插件等等其他资源，除资源本身问题外，都不包含免费技术服务，如需技术支持需支付100+技术服务费一次，具体依客服说明为准，请大家谅解！
说明： 本站资源解压密码见“常见问题”，一般都为“www.360mb.net”！
申明： 模板吧提供资源仅供学习用途，禁止用于搭建非法网站，本站不为涉黄、涉毒、涉赌等不法分子提供任何技术便利。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
说明： 本站资源解压密码见“常见问题”，一般都为“www.360mb.net”！
申明： 模板吧提供资源仅供学习用途，禁止用于搭建非法网站，本站不为涉黄、涉毒、涉赌等不法分子提供任何技术便利。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
管理员
