@clappr/core

中文文档

0.18.1发布于 2026/10/26BSD-3-ClauseTypeScriptESM + CJS零依赖构建来源已验证近 30 天下载 3273

网络可扩展媒体播放器的核心组件

文档目录29 节

:video 相机:Demo
: 三角 flag on 后台:目录
: gem: 特性
: clapper: 用法
通过脚本标记 :
通过 npm 模块 :
: 书籍: API 文档
播放器.attach To( 元素)
播放器。 play ()
玩家. 暂停 ()
播放器。 stop ()
player.mute () (英语)
播放器. unmute ()
播放器.seek( 值)
播放器.seek 百分比(值)
玩家.is 播放()
播放器。 get Plugin( 插件Name
玩家. getCurrentTime () 时间
播放器。获取定义( C)
播放器. 更改大小( 大小)
播放器. dstroy ()
播放器. load( 来源)
player.confetch(选项)
:hammer 并扳手:配置
玩家配置
播放配置
:计算机:开发
: 提高的手:贡献者
: 有翼:赞助商

克莱普克核心

Clappr-core是Clappr播放器的一部分,包含Clappr项目的主要架构.

Clappr正在开发中,但已做好生产准备。随便你开拆问题,然后发我们请求.

:video 相机:Demo

现场演示来测试外部插件.

: 三角 flag on 后台:目录

: gem: 特性

使用 HTM5 视频标签
- 使其在保持高平台支持的同时容易被使用.
插件架构
- 添加新的特性而不影响其他函数.
广泛
- 添加其它视频格式的支持或修改已经存在的插件.

: clapper: 用法

通过脚本标记 :

在您的 HTML 中添加以下脚本 <head>数字 :

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@clappr/core@latest/dist/clappr-core.min.js"
></script>

现在,通过在您的 <body>数字 :

<div class="player"></div>
<script>
  var playerElement = document.querySelector('.player')
  var player = new Clappr.Player({
    source: 'http://your.video/here.mp4',
    parent: playerElement
  })
</script>

通过 npm 模块 :

该项目可在npm网址https://www.npmjs.com/package/@clappr/core上查阅

yarn install @clappr/core --save-dev

您应该使用 baseUrl 选项 :

var player = new Clappr.Player({
  source: 'http://your.video/here.mp4',
  baseUrl: 'http://example.com/assets/clappr'
})

就上述情况而言,克莱普尔期望所有资产( dist 文件夹中) 可在“http://example.com/assets/clappr-core”上查阅. 您需要安排位于 baseUrl 在您的构建过程中.

安装用于网络软件包数字 :

默认情况下,网页包会查看 main 输入 package.json 并使用工程的已建版本。如果这就是你想要的, 你没有别的事可以做.

如果您想在构建过程中将 Clappr 自己建入您的项目, 请在您的网页包配置中添加以下内容 :

resolve: {
    alias: { Clappr: '@clappr/core/src/main.js' },
    root: [path.resolve(__dirname, 'node_modules/@clappr/core/src')],
    extensions: ['', '.js'],
}

安装用于浏览器数字 :

浏览会查看 main 输入 package.json 并使用工程的已建版本.

: 书籍: API 文档

创建实例 :

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

返回插件实例。示例

var strings = player.getPlugin('strings')

此方法搜索 Core 财务报告和审定财务报表 Container 插件的名称并返回第一个找到的 .

玩家. getCurrentTime () 时间

返回当前来源的当前时间(以秒计).

播放器。获取定义( C)

返回当前源的持续时间(以秒计).

播放器. 更改大小( 大小)

更改当前玩家画布的大小。这个 size 参数应为字面对象 height 财务报告和审定财务报表 width示例:

player.resize({ height: 360, width: 640 })

播放器. dstroy ()

摧毁当前玩家并将其从 DOM 中删除.

播放器. load( 来源)

装入新来源.

player.confetch(选项)

允许在玩家创建后配置它 .

:hammer 并扳手:配置

以下所列所有参数均应添加于 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 即时适用。在这种情况下,这些选项被应用在下一部视频中.

玩家配置

父目录

用于指定玩家应该使用 DOM 元素附加到哪里.

父目录

用于指定玩家使用一个 DOM 元素的ID 附加到哪里 .

来源

设置要播放的媒体源 URL 。您可以根据已有的回放设置媒体源 .

来源

一系列来源. 用于在数组中播放下一个媒体源, 如果上一个无效 .

缩写

设置您使用的媒体源格式 source 选项。如果您需要使用没有扩展名的媒体 URL .

事件

对映射事件添加回调对象。目前绘制的事件列表为:

{
  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,所以如果您想要从代码上的容器层听到事件,您可以绑定事件,例如下面的例子:

player.core.activeContainer.on(Clappr.Events.CONTAINER_STATE_BUFFERING, function() { ... })

参见 Clappr 上的所有现有事件这里。。。 .

插件

用于将外部插件实例和插件行为配置到 Clappr 的对象 .

{
  plugins: {
    core: [CorePlugin],
    container: [ContainerPlugin],
    playback: [Playbacks],
    loadExternalPluginsFirst: true,
    loadExternalPlaybacksFirst: true,
  }
}

外部插件配置示例 :

// Playback
<script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@clappr/hlsjs-playback@latest/dist/hlsjs-playback.min.js"></script>

// Container
<script src="https://cdn.jsdelivr.net/npm/@clappr/stats-plugin@latest/dist/clappr-stats.min.js"></script>

{
  plugins: {
    container: [ClapprStats],
    playback: [HlsjsPlayback],
  }
}

在平面阵列上也可以通过任意类别的插件。示例

{
  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

将音量设定为零视频标签哑子属性.

循环

默认值 : false

视频结束后重新启动视频视频标签循环属性.

语言

默认值 : en-US

设置 Clappr 上支持的当前语言之一。您可以检查所有支持的语言字符串插件。。。 .

如果您想提供翻译, 请编辑 PR 字符串插件。。。 .

播放不支持的信息

默认值: playback_not_supported 字符串在字符串插件

定义不支持播放时要显示的自定义消息 .

使用代码前缀

默认值 : 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。。。 .

播放配置

Clappr有一套具体的回放选项. 回放的配置, 它仍然只兼容 html5_video 回放(和衍生回放).

下面,对每个项目的描述:

playback: {
  preload: 'metadata',
  disableContextMenu: false,
  controls: true,
  crossOrigin: 'use-credentials',
  playInline: true,
  minimumDvrSize: null,
  externalTracks: [],
  hlsjsConfig: {},
  shakaConfiguration: {},
}

预装

默认值 : metadata

以防装入点播视频mp4),可以根据预装属性选项定义视频预装的方式.

更多关于视频标签预加载属性的内容这里。。。 .

禁用 ContextMenu 语句

默认值 : false

禁用激活上下文菜单的可能性 .

控件

默认值 : true

用于启用或禁用 HTML5 视频标签控制系统.

横跨奥里金

默认值 : use-credentials

用于设置 HTML5 视频标签上支持的可能值之一 .

更多关于视频标签横跨Origin属性的内容这里。。。 .

播放内线

默认值 : true

启用或禁用 HTML5 视频标签播放内线属性.

最小 DvrSize 码

用于为活媒体设置活动 DVR 最小值。此选项只用于此时的 HTML5Playback .

外部跟踪

一系列轨迹. 每个音轨必须有属性 src, (中文(简体) ), lang 财务报告和审定财务报表 label属性 kind 由于默认值, 音轨对象是可选的 subtitles。。。 .

更多关于视频标签元素的音轨这里。。。 .

hlsjs 图形

任何特定的设置 hls.js (英语) 应在此选项中.

{
  playback: {
    hlsjsConfig: {
      // hls.js specific options
    }
  }
}

shaka 图形

任何特定的设置游戏玩家应在此选项中.

{
  playback: {
    shakaConfiguration: {
      // shaka-player specific options
    }
  }
}

:计算机:开发

输入工程目录并安装依赖 :

yarn install

修改并运行测试( Vitest) :

yarn test

构建自己的版本( Vite 库模式) :

yarn build

检查结果 dist/ 文件夹.

启动本地服务器 :

yarn start

此命令将在 8080 端口启动 Vite dev 服务器, 您可以在 http://localhost: 8080/

: 提高的手:贡献者

这个项目的存在要归功于所有那些贡献。。。 .

版本与发布记录

@clappr/core 共发布 74 个版本，首次发布于 2019/06/23；过去 12 个月发布了 17 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本	发布日期	距今
`0.18.1`latest	2026/10/26	14 天前
`0.18.0`	2026/10/21	20 天前
`0.17.2`	2026/10/06	1 个月前
`0.17.1`	2026/09/10	2 个月前
`0.17.0`	2026/08/28	2 个月前
`0.16.3`	2026/08/16	2 个月前

关于 @clappr/core 的常见问题

@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 和提交记录判断。

npm install @clappr/core

pnpmpnpm add @clappr/core
yarnyarn add @clappr/core
bunbun add @clappr/core

在你的项目目录中运行此命令。

近 30 天下载

3,273

约 3273 次日均 109 次

统计周期 2026/10/10 – 2026/11/08
数据来自 npm 官方下载统计，今天更新

最新版本0.18.1发布于 14 天前

开源许可BSD-3-Clause宽松许可

包体积2.7 MB174 个文件 · 解压后

运行依赖0 个零依赖

模块格式ESM + CJS

TypeScript自带类型

发布版本74 个近 12 个月 17 个

首次发布2019/06/237 年前

元数据更新2026/10/26

每一个软件包背后，
都有分享与创造的人。

@clappr/core

克莱普克核心

:video 相机:Demo

: 三角 flag on 后台:目录

: gem: 特性

: clapper: 用法

通过脚本标记 :

通过 npm 模块 :

安装用于 网络软件包数字 :

安装用于 浏览器数字 :

: 书籍: API 文档

播放器.attach To( 元素)

播放器。 play ()

玩家. 暂停 ()

播放器。 stop ()

player.mute () (英语)

播放器. unmute ()

播放器.seek( 值)

播放器.seek 百分比(值)

玩家.is 播放()

播放器。 get Plugin( 插件Name

玩家. getCurrentTime () 时间

播放器。 获取定义( C)

播放器. 更改大小( 大小)

播放器. dstroy ()

播放器. load( 来源)

player.confetch(选项)

:hammer 并 扳手:配置

玩家配置

父目录

父目录

来源

来源

缩写

事件

插件

插件. load External Plugins First

插件. load ExternalPlaybacks First

高度

宽度

自动播放

哑

循环

语言

播放不支持的信息

使用代码前缀

自动搜索从Url

包括ResetStyle 软件

播放配置

预装

禁用 ContextMenu 语句

控件

横跨奥里金

播放内线

最小 DvrSize 码

外部跟踪

hlsjs 图形

shaka 图形

:计算机:开发

: 提高的手:贡献者

: 有 翼:赞助商

版本与发布记录

关于 @clappr/core 的常见问题

@clappr/core 是什么？

如何安装 @clappr/core？

@clappr/core 支持 TypeScript 吗？

@clappr/core 支持 ESM 还是 CommonJS？

@clappr/core 可以商用吗？

@clappr/core 的下载量有多少？

@clappr/core 还在维护吗？

安装用于网络软件包数字 :

安装用于浏览器数字 :

播放器。获取定义( C)

:hammer 并扳手:配置

: 有翼:赞助商