整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的Clappr 是一个可扩展的网络媒体播放器。
Clappr 是一个可扩展的网络媒体播放器。您的架构主要被投射到插件中，通过设计为项目添加低耦合性，并且可以轻松添加无限功能。
Clappr 默认使用HTMLVideoElement来保证对许多平台的支持。您可以扩展默认的 HTML5 播放或播放界面以创建一种新的媒体支持，就像插件一样！
HTMLVideoElement地址：https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
通过脚本标签：
在您的 HTML 中添加以下脚本：
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
</head>现在，创建播放器：
<body>
<div id="player"></div>
<script>
var player=new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
</script>
</body>通过 npm 模块：
该项目在 npm 上可用，网址为https://www.npmjs.com/package/@clappr/core
yarn install @clappr/core --save-dev您应该使用以下选项指定资产所在位置的基本 URL baseUrl：
var player=new Clappr.Player({
source: "http://your.video/here.mp4",
baseUrl: "http://example.com/assets/clappr"
});在上述情况下，Clappr 将期望所有资产（在 dist 文件夹中）都可以在“ http://example.com/assets/clappr-core ”访问。您需要baseUrl在构建过程中安排要定位的资产。
为webpack安装：
默认情况下，webpack 将查看该main字段package.json并使用项目的构建版本。如果这就是你想要的，那么你就没有什么可做的了。
如果您想在构建过程中将 Clappr 自己构建到您的项目中，请将以下内容添加到您的 webpack 配置中：
resolve: {
alias: { Clappr: '@clappr/core/src/main.js' },
root: [path.resolve(__dirname, 'node_modules/@clappr/core/src')],
extensions: ['', '.js'],
}player.attachTo(element)
您可以使用此方法将播放器附加到给定元素。parentId在传递参数的播放器实例化期间指定它时，您不需要这样做。
player.play()
播放当前源。
player.pause()
暂停当前?源。
player.stop()
停止当前源。
player.mute()
使当前源静音。
player.unmute()
取消静音当前源。
player.seek(value)
寻找当前视频 ( source)。例如，player.seek(120)将搜索到当前视频的第 120 秒（2 分钟）。
player.seekPercentage(value)
寻找当前视频 ( source)。例如，player.seek(50)将寻找到当前视频的中间。
player.isPlaying()
true如果当前源正在播放，则返回，否则返回false。
player.getPlugin(pluginName)
返回插件实例。例子：
var strings=player.getPlugin('strings');此方法按名称搜索Core和Container插件并返回找到的第一个。
player.getCurrentTime()
返回当前源的当前时间（以秒为单位）。
player.getDuration()
返回当前源的持续时间（以秒为单位）。
player.resize(size)
调整当前播放器画布的大小。size参数应该是带有heightand的文字对象width。例子：
player.resize({height: 360, width: 640});player.destroy()
销毁当前播放器并将其从 DOM 中移除。
player.load(source)
加载新源。
player.configure(options)
允许在创建播放器后对其进行配置。
下面列出的所有参数都应添加到Clappr.Player对象实例化或通过player.configure.
例子：
var player=new Clappr.Player({
source: "http://your.video/here.mp4",
parameter1: "value1",
parameter2: "value2",
});
// or
player.configure({
parameter3: "value3",
parameter4: "value4",
})请注意，通过configure的某些选项不会立即应用。在这种情况下，这些选项将在下一个视频中应用。
媒体控制
一个在视频容器上呈现界面并添加控制播放操作（播放、暂停、停止）的可能性的插件。
点击暂停
添加通过单击容器元素在play/播放状态之间切换的可能性。
var player=new Clappr.Player({
source: "http://your.video/here.mp4",
// Optionally, send a payload upon the container's pausing with the `onClickPayload` parameter
clickToPauseConfig: {
onClickPayload: { any: 'any' } // sends the payload to container when clicked
});隐藏式字幕
添加了自定义字幕标签和标题的可能性。
var player=new Clappr.Player({
source: "http://your.video/here.mp4",
closedCaptionsConfig: {
title: 'Subtitles', // default is none
ariaLabel: 'Closed Captions', // Default is 'cc-button'
labelCallback: function (track) { return track.name }, // track is an object with id, name and track properties (track is TextTrack object)
},
});海报
通过将海报选项添加到 Clappr 播放器来定义海报图像。它会在视频嵌入后出现，在播放时消失，并在用户停止视频时返回。对于音频广播，海报在播放时保持可见。
var player=new Clappr.Player({
source: "http://your.video/here.mp4",
poster: "http://url/img.png"
});寻求时间
当鼠标悬停在媒体控件搜索栏上时通知当前时间。
var player=new Clappr.Player({
source: "http://your.video/here.mp4",
// Only for live stream with DVR
actualLiveTime: true, // default is false
// Meant to be used with actualLiveTime
actualLiveServerTime: "2015/11/26 06:01:03" // default is current date
});水印
在视频上添加水印。在您的嵌入参数上放置watermark选项以自动在您的视频上添加水印。通过定义position选项选择角位置。位置可以是bottom-left、bottom-right和top-left。top-right要定义单击水印时要打开的 URL，请使用watermarkLinkoption。如果watermarkLink未定义参数，水印将不可点击。
var player=new Clappr.Player({
source: "http://your.video/here.mp4",
watermark: "http://url/img.png",
position: 'top-right',
watermarkLink: "http://example.net/"
});—END—
开源地址：https://github.com/clappr/clappr
在 HTML5 中，我们可以通过 <video>标签直接插入mp4、mov等格式的视频，但这是浏览器默认的方式，播放的功能也比较单一，我们一般会借助第三方的视频播放器来实现丰富的播放效果。
一款带解析器、能节省流量的HTML5视频播放器，相对于 video.js，西瓜播放器能够在播放器端实现加载视频、解析视频、转换格式，让不支持分段播放的mp4动态支持，这样就无须转换源视频的格式，服务器端也无其他开销。
项目主页：https://v2.h5player.bytedance.com/
项目代码：https://github.com/bytedance/xgplayer
video.js 据说是目前最流行的 HTML5 视频播放器，star37K，应该所言不虚，该项目自 2010 年启动，已经在超过 70 万的网站中使用。 video.js 支持 HTML5 视频和媒体源扩展，以及其他播放技术，如 YouTube 和 Vimeo（通过插件）。它支持在台式机和移动设备上播放视频。百度网盘、慕课网的视频播放也是使用的这款插件。
官网地址：https://videojs.com/
项目代码：https://github.com/videojs/video.js
中文文档：https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html
MediaElement是一款老牌的 HTML5播放器控件，有很多知名开源库都使用了它，包括 WordPress、Drupal、Joomla、jQuery、typo3 等，MediaElement现在是WordPress核心的一部分。
项目主页：https://www.mediaelementjs.com/
项目代码：https://github.com/mediaelement/mediaelement
Plyr 是一个简单的可定制的 HTML5 媒体播放器，使用原生 JavaScript 没有其他依赖。支持 YouTube 和 Vimeo 。
官方网站：https://plyr.io/
项目代码：https://github.com/sampotts/plyr
华播放器（SmartPlayer）是一款非常优秀的安防领域播放软件，用户可以在该软件中逐帧的查看视频，支持Smart265/H265编码方式.avi/.asf格式录像播放，同时用户还可以在软件中选择中英文切换，非常便捷。该软件支持同时播放多个视频，支持同步异步播放，自定义分割画面。
来源：http://www.3h3.com/soft/270795.html#jptj
支持逐帧倒放功能，不仅支持单帧倒放，还支持多倍数倒放。
支持多路同步播放功能。
支持鼠标操作局部放大和拖动功能，即电子云台功能。
支持分段预览功能，快速找到所需场景，并能对各段进行同步播放。
支持播放智能设备码流，在画面上展示智能事件信息。
支持码流篡改检测功能，支持码流格式转换功能。
支持视频属性查看。
支持 H265、svac 码流。
支持 avi、mp4、flv、asf、mov、dav、dav_文件播放。
支持亮度、对比度、饱和度、色度显示调节功能。
支持快捷键设置功能。
优化音视频同步策略。
优化快放策略，支持更改倍数快放。
优化时间轴，增强其呈现视频的方式。
优化文件列表管理。
播放普通视频时支持播放录像内分屏功能。
播放鱼眼视频时支持鱼眼功能
1、修复180;鱼眼录像矫正错误问题；
2、修复鱼眼录像OSD信息被截取问题；
3、修复智能规则线不准确问题；
4、修复英文环境下录像文件类型显示乱码问题。
*请认真填写需求信息，我们会在24小时内与您取得联系。
