clappr HTML5视频播放器应用实例

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!

 

喜欢 0
1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
360模板吧 » clappr HTML5视频播放器应用实例

发表评论