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！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
