《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的ClAppr 是一个可扩展的网络媒体播放器。
Clappr 是一个可扩展的网络媒体播放器。您的架构主要被投射到插件中，通过设计为项目添加低耦合性，并且可以轻松添加无限功能。
Clappr 默认使用htmlVideoElement来保证对许多平台的支持。您可以扩展默认的 HTML5 播放或播放界面以创建一种新的媒体支持，就像插件一样！
HTMLVideoElement地址：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
Clappr用法
通过脚本标签：
在您的 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'],
}
API 文档
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配置
下面列出的所有参数都应添加到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的某些选项不会立即应用。在这种情况下，这些选项将在下一个视频中应用。
Clappr内置插件
媒体控制
一个在视频容器上呈现界面并添加控制播放操作（播放、暂停、停止）的可能性的插件。
点击暂停
添加通过单击容器元素在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—
开源协议：Clause License
开源地址：
https://github.com/clappr/clappr
京公网安备 11010802035086号