更新记录

1.0.0（2025-12-07）

功能特性

1. 基础播放控制 播放/暂停控制 进度条拖拽 全屏切换 音量控制（通过 muted 属性）
2. 高级功能 跳过片头: 通过 skipTime 属性设置片头时长，自动显示跳过按钮 试看限制: 通过 trialTime 属性限制试看时长 锁定控制栏: 全屏状态下可锁定控制栏，防止误触 自定义菜单: 提供菜单插槽用于扩展功能
3. 状态管理 全屏状态 (isFullscreen) 播放状态 (isPlaying) 错误状态 (hasError) 锁定状态 (isLocked)

平台兼容性

uni-app

uni-app x(4.87)

其他

Hub Player 播放器组件文档

组件概述

Hub Player 是一个功能丰富的视频播放器组件，支持多种播放控制功能，包括全屏、锁定控制栏、跳过片头、试看限制等功能。

Props 属性

Events 事件

Slots 插槽

功能特性

1. 基础播放控制

• 播放/暂停控制
• 进度条拖拽
• 全屏切换
• 音量控制（通过 [muted].kt#L28-L28) 属性）

2. 高级功能

• 跳过片头: 通过 [skipTime] 属性设置片头时长，自动显示跳过按钮
• 试看限制: 通过 [trialTime] 属性限制试看时长
• 锁定控制栏: 全屏状态下可锁定控制栏，防止误触
• 自定义菜单: 提供菜单插槽用于扩展功能

3. 状态管理

• 全屏状态 (isFullscreen)
• 播放状态 (isPlaying)
• 错误状态 (hasError)
• 锁定状态 (isLocked)
• 禁用状态 (isDisabled)

使用示例

<hub-player
  title="我的视频"
  :src="videoUrl"
  :poster="posterUrl"
  :autoplay="false"
  :skip-time="15"
  :trial-time="120"
  @back="handleBack"
  @ended="handleEnded"
>
  <template #menu-content>
    <view>自定义菜单项</view>
  </template>

  <template #overlay>
    <view>自定义遮罩内容</view>
  </template>
</hub-player>

样式定制

组件提供了一系列 CSS 类名用于样式定制：

• .hub-player: 播放器容器
• .hub-player-header: 顶部控制栏
• .hub-player-footer: 底部控制栏
• .hub-player-center-controls: 中心控制区域
• .hub-player-menu: 菜单面板
• .hub-player-overlay: 遮罩层

注意事项

1. 组件依赖于 uni.createVideoContext API，请确保运行环境支持
2. 字体文件 [UKIJTor.ttf] 需要正确放置在 /uni_modules/hub-player/static/fonts/ 目录下
3. 图标文件需放置在 /uni_modules/hub-player/static/icons/ 目录下
4. 在禁用状态下，播放器会自动暂停并退出全屏模式