# @clappr/core 中文文档
规范地址：https://npmcn.com/package/%40clappr/core/
版本：0\.18\.1
npm 元数据更新时间：2026-10-26T15:19:35.396Z
中文译文更新时间：2026-11-09T23:35:13.131Z
软件包许可：BSD-3-Clause
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40clappr/core
原文对照：https://npmcn.com/package/%40clappr/core/?lang=original
项目主页：https://github.com/clappr/clappr-core
源码仓库：https://github.com/clappr/clappr
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：2.7 MB，174 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2019-06-22T20:39:15.231Z
- 最新版本发布：2026-10-26T15:19:34.976Z
- 近 30 天下载量：3273（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：74（近 12 个月 17 个）
## 中文简介
网络可扩展媒体播放器的核心组件
## 安装
```sh
npm install @clappr/core
```
也可以使用：`pnpm add @clappr/core`、`yarn add @clappr/core`、`bun add @clappr/core`
## README
# 克莱普克核心
Clappr-core是Clappr播放器的一部分,包含Clappr项目的主要架构.
Clappr正在开发中,但已做好生产准备。 随便你开拆问题,然后发我们请求.
[](https://badge.fury.io/js/%40clappr%2Fcore) [](https://bundlephobia.com/result?p=@clappr/core@latest) [](https://coveralls.io/github/clappr/clappr-core?branch=master) [](https://github.com/clappr/clappr-core/blob/master/LICENSE)
## :video 相机:Demo
[现场演示](http://clappr.io/demo/) 来测试外部插件.
## : 三角 flag on 后台:目录
- [演示](https://github.com/clappr/clappr-core#video_camera-demo)
- [目录](https://github.com/clappr/clappr-core#triangular_flag_on_post-table-of-contents)
- [特征](https://github.com/clappr/clappr-core#gem-features)
- [使用量](https://github.com/clappr/clappr-core#clapper-Usage)
- [API 文档](https://github.com/clappr/clappr-core#books-api-documentation)
- [配置](https://github.com/clappr/clappr-core#hammer_and_wrench-configuration)
- [发展](https://github.com/clappr/clappr-core#computer-development)
- [贡献者](https://github.com/clappr/clappr-core#raised_hands-contributors)
- [发起人](https://github.com/clappr/clappr-core#money_with_wings-sponsor)
## : gem: 特性
- 使用 [HTM5 视频标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
- 使其在保持高平台支持的同时容易被使用.
- 插件架构
- 添加新的特性而不影响其他函数.
- 广泛
- 添加其它视频格式的支持或修改已经存在的插件.
## : clapper: 用法
### 通过脚本标记 :
在您的 HTML 中添加以下脚本 ``数字 :
```html
```
现在,通过在您的 ``数字 :
```html
```
### 通过 npm 模块 :
该项目可在npm网址https://www.npmjs.com/package/@clappr/core上查阅
`yarn install @clappr/core --save-dev`
您应该使用 `baseUrl` 选项 :
```javascript
var player = new Clappr.Player({
source: 'http://your.video/here.mp4',
baseUrl: 'http://example.com/assets/clappr'
})
```
就上述情况而言,克莱普尔期望所有 [资产( dist 文件夹中)](https://github.com/clappr/clappr-core/tree/master/dist) 可在“http://example.com/assets/clappr-core”上查阅. 您需要安排位于 `baseUrl` 在您的构建过程中.
#### 安装用于 [网络软件包](https://webpack.github.io/)数字 :
默认情况下,网页包会查看 `main` 输入 `package.json` 并使用工程的已建版本。 如果这就是你想要的, 你没有别的事可以做.
如果您想在构建过程中将 Clappr 自己建入您的项目, 请在您的网页包配置中添加以下内容 :
```javascript
resolve: {
alias: { Clappr: '@clappr/core/src/main.js' },
root: [path.resolve(__dirname, 'node_modules/@clappr/core/src')],
extensions: ['', '.js'],
}
```
#### 安装用于 [浏览器](http://browserify.org/)数字 :
浏览会查看 `main` 输入 `package.json` 并使用工程的已建版本.
## : 书籍: API 文档
创建实例 :
```javascript
var player = new Clappr.Player({
source: 'http://your.video/here.mp4',
parentId: '#player'
})
```
###  播放器.attach To( 元素)
您可以使用这种方法将玩家附加到给定元素上. 在玩家瞬间传递时,您无需在指定时这样做 `parentId` 一、导 言.
###  播放器。 play ()
播放当前来源.
###  玩家. 暂停 ()
暂停当前来源.
###  播放器。 stop ()
停止当前来源.
###  player.mute () (英语)
调用当前来源 .
###  播放器. unmute ()
解说当前出处.
###  播放器.seek( 值)
查找当前视频( N)`source`) (中文(简体) ). 譬如说, `player.seek(120)` 将争取将当前视频的120次(2分钟)翻拍.
###  播放器.seek 百分比(值)
查找当前视频( N)`source`) (中文(简体) ). 譬如说, `player.seek(50)` 将寻求到当前视频的中间.
###  玩家.is 播放()
回返 `true` 如果当前源正在播放, 否则返回 `false`。 。 。 .
###  播放器。 get Plugin( 插件Name
返回插件实例 。 示例
```javascript
var strings = player.getPlugin('strings')
```
此方法搜索 `Core` 财务报告和审定财务报表 `Container` 插件的名称并返回第一个找到的 .
###  玩家. getCurrentTime () 时间
返回当前来源的当前时间(以秒计).
###  播放器。 获取定义( C)
返回当前源的持续时间(以秒计).
###  播放器. 更改大小( 大小)
更改当前玩家画布的大小 。 这个 `size` 参数应为字面对象 `height` 财务报告和审定财务报表 `width`示例:
```javascript
player.resize({ height: 360, width: 640 })
```
###  播放器. dstroy ()
摧毁当前玩家并将其从 DOM 中删除.
###  播放器. load( 来源)
装入新来源.
###  player.confetch(选项)
允许在玩家创建后配置它 .
## :hammer 并 扳手:配置
以下所列所有参数均应添加于 `Clappr.Player` 对象即时化或通过 `player.configure`。 。 。 .
示例
```javascript
var player = new Clappr.Player({
source: 'http://your.video/here.mp4',
parameter1: 'value1',
parameter2: 'value2'
})
// or
player.configure({
parameter3: 'value3',
parameter4: 'value4'
})
```
请注意一些选项通过 `configure` 即时适用。 在这种情况下,这些选项被应用在下一部视频中.
### 玩家配置
#### 父目录
用于指定玩家应该使用 DOM 元素附加到哪里.
#### 父目录
用于指定玩家使用一个 DOM 元素的ID 附加到哪里 .
#### 来源
设置要播放的媒体源 URL 。 您可以根据已有的回放设置媒体源 .
#### 来源
一系列来源. 用于在数组中播放下一个媒体源, 如果上一个无效 .
#### 缩写
设置您使用的媒体源格式 `source` 选项。 如果您需要使用没有扩展名的媒体 URL .
#### 事件
对映射事件添加回调对象 。 目前绘制的事件列表为:
```javascript
{
events: {
onReady: function() { ... },//Fired when the player is ready on startup
onResize: function() { ... },//Fired when player resizes
onPlay: function() { ... },//Fired when player starts to play
onPause: function() { ... },//Fired when player pauses
onStop: function() { ... },//Fired when player stops
onEnded: function() { ... },//Fired when player ends the video
onSeek: function() { ... },//Fired when player seeks the video
onError: function() { ... },//Fired when player receives an error
onTimeUpdate: function() { ... },//Fired when the time is updated on player
onVolumeUpdate: function() { ... },//Fired when player updates its volume
onSubtitleAvailable: function() { ... },//Fired when subtitles is available
}
}
```
如果你想听其他层的事件, **您需要添加特定范围的绑定值**。 。 。 .
例如 `CONTAINER_STATE_BUFFERING` 事件由 `container`,所以如果您想要从代码上的容器层听到事件,您可以绑定事件,例如下面的例子:
```javascript
player.core.activeContainer.on(Clappr.Events.CONTAINER_STATE_BUFFERING, function() { ... })
```
参见 Clappr 上的所有现有事件 [这里](https://github.com/clappr/clappr-core/blob/master/src/base/events/events.js#L227)。 。 。 .
#### 插件
用于将外部插件实例和插件行为配置到 Clappr 的对象 .
```javascript
{
plugins: {
core: [CorePlugin],
container: [ContainerPlugin],
playback: [Playbacks],
loadExternalPluginsFirst: true,
loadExternalPlaybacksFirst: true,
}
}
```
外部插件配置示例 :
```html
// Playback
// Container
```
```javascript
{
plugins: {
container: [ClapprStats],
playback: [HlsjsPlayback],
}
}
```
在平面阵列上也可以通过任意类别的插件 。 示例
```javascript
{
plugins: [ClapprStats, HlsjsPlayback]
}
```
#### 插件. load External Plugins First
> 默认值 : `true`
强制在默认 Clappr 插件前加载外部插件 .
#### 插件. load ExternalPlaybacks First
> 默认值 : `true`
在默认 Clappr 播放回放前强制加载外部播放 .
#### 高度
> 默认值 : `360px`
设置玩家高度 。 您可以使用 px 设置(`500px`)或百分比(百分比)`100%`) (中文(简体) ).
#### 宽度
> 默认值 : `640px`
设置玩家宽度 。 您可以使用 px 设置(`500px`)或百分比(百分比)`100%`) (中文(简体) ).
#### 自动播放
> 默认值 : `false`
配置 Clappr 在玩家准备好播放后播放媒体.
#### 哑
> 默认值 : `false`
将音量设定为零 [视频标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) 哑子属性.
#### 循环
> 默认值 : `false`
视频结束后重新启动视频 [视频标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) 循环属性.
#### 语言
> 默认值 : `en-US`
设置 Clappr 上支持的当前语言之一 。 您可以检查所有支持的语言 [字符串插件](https://github.com/clappr/clappr-core/blob/master/src/plugins/strings/strings.js#L35-93)。 。 。 .
如果您想提供翻译, 请编辑 PR [字符串插件](https://github.com/clappr/clappr-core/blob/master/src/plugins/strings/strings.js)。 。 。 .
#### 播放不支持的信息
> 默认值: `playback_not_supported` 字符串在 [字符串插件](https://github.com/clappr/clappr-core/blob/master/src/plugins/strings/strings.js)
定义不支持播放时要显示的自定义消息 .
#### 使用代码前缀
> 默认值 : `true`
Clappr 具有创建 `code` 属性 `error` 对象使用原出错代码时发生错误的组件名称.
示例 `hls:networkError_manifestLoadError (component_name:error_code)`
您可以禁用此模式 。 只使用设定此选项的原始错误代码 `false`。 。 。 .
#### 自动搜索从Url
> 默认值 : `true`
默认情况下, 如果 URL 包含一个时间, 那么媒体将寻求达到此点 .
示例 `example.com?t=100` 会让媒体在100秒开始报道.
您可以以值禁用此行为设置此选项 `false`。 。 。 .
#### 包括ResetStyle 软件
> 默认值 : `true`
默认情况下Clappr会重新设置会影响自己风格的一组样式. 通过这个选项,可以启用/禁用 [重设.cs](https://github.com/clappr/clappr-core/blob/master/src/base/scss/_reset.scss)。 。 。 .
### 播放配置
Clappr有一套具体的回放选项. 回放的配置, 它仍然只兼容 `html5_video` 回放(和衍生回放).
下面,对每个项目的描述:
```javascript
playback: {
preload: 'metadata',
disableContextMenu: false,
controls: true,
crossOrigin: 'use-credentials',
playInline: true,
minimumDvrSize: null,
externalTracks: [],
hlsjsConfig: {},
shakaConfiguration: {},
}
```
#### 预装
> 默认值 : `metadata`
以防装入点播视频`mp4`),可以根据预装属性选项定义视频预装的方式.
更多关于视频标签预加载属性的内容 [这里](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)。 。 。 .
#### 禁用 ContextMenu 语句
> 默认值 : `false`
禁用激活上下文菜单的可能性 .
#### 控件
> 默认值 : `true`
用于启用或禁用 [HTML5 视频标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) 控制系统.
#### 横跨奥里金
> 默认值 : `use-credentials`
用于设置 HTML5 视频标签上支持的可能值之一 .
更多关于视频标签横跨Origin属性的内容 [这里](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)。 。 。 .
#### 播放内线
> 默认值 : `true`
启用或禁用 [HTML5 视频标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) 播放内线属性.
#### 最小 DvrSize 码
用于为活媒体设置活动 DVR 最小值 。 此选项只用于此时的 HTML5Playback .
#### 外部跟踪
一系列轨迹. 每个音轨必须有属性 `src`, (中文(简体) ), `lang` 财务报告和审定财务报表 `label`属性 `kind` 由于默认值, 音轨对象是可选的 `subtitles`。 。 。 .
更多关于视频标签元素的音轨 [这里](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)。 。 。 .
#### hlsjs 图形
任何特定的设置 [hls.js (英语)](https://github.com/video-dev/hls.js/blob/master/docs/API.md) 应在此选项中.
```javascript
{
playback: {
hlsjsConfig: {
// hls.js specific options
}
}
}
```
#### shaka 图形
任何特定的设置 [游戏玩家](https://shaka-player-demo.appspot.com/docs/api/tutorial-config.html) 应在此选项中.
```javascript
{
playback: {
shakaConfiguration: {
// shaka-player specific options
}
}
}
```
## :计算机:开发
输入工程目录并安装依赖 :
`yarn install`
修改并运行测试( Vitest) :
`yarn test`
构建自己的版本( Vite 库模式) :
`yarn build`
检查结果 `dist/` 文件夹.
启动本地服务器 :
`yarn start`
此命令将在 8080 端口启动 Vite dev 服务器, 您可以在 http://localhost: 8080/
## : 提高的手:贡献者
这个项目的存在要归功于所有那些 [贡献](https://github.com/clappr/clappr-core/graphs/contributors)。 。 。 .
## : 有 翼:赞助商
[](http://globo.com/)
## 常见问题
### @clappr/core 是什么？
网络可扩展媒体播放器的核心组件
### 如何安装 @clappr/core？
在项目目录运行 npm install @clappr/core，或使用 pnpm add / yarn add / bun add。
### @clappr/core 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @clappr/core 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @clappr/core 可以商用吗？
@clappr/core 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。
### @clappr/core 的下载量有多少？
根据 npm 官方下载统计，@clappr/core 在 2026/10/10 – 2026/11/08 这 30 天内被下载 3,273 次，日均约 109 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @clappr/core 还在维护吗？
最新版本 0\.18\.1 发布于 2026/10/26（14 天前）；至今共发布 74 个版本，其中过去 12 个月发布了 17 个；首次发布于 2019/06/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。