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.js
https://lib.baomitu.com/clappr/0.4.5/clappr.min.js

2.在“<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！

 

1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定，不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益，请联系我们进行处理。