Tui

src

视频地址

string

-

-

changed 0.6.4 videoUrl -> src

autoplay

是否自动播放

boolean

-

false

added 0.6.5

backgroundColor

进度条高亮颜色

string

-

#409eff

classNames

自定义关键结构的 class 名映射

Partial<Record<'root'|'video'|'controls'|'controlsTop'|'progress'|'controlsLeft'|'controlsCenter'|'controlsRight'|'setting'|'settingPopover'|'mediaInfo', string>>

-

{}

added 0.6.5

controlsHideDelay

控制区隐藏等待时间（毫秒）

number

-

200

added 0.6.4

mouseMoveIdleDelay

鼠标停止移动后，进入 controlsHideDelay 倒计时前的等待时间（毫秒）

number

-

2000

added 0.6.5

showFullscreenControl

是否显示控制区全屏图标

boolean

-

true

added 0.6.5

showProgressHoverPreview

是否显示进度条 hover 时间预览

boolean

-

false

added 0.6.5

fullscreenHintText

进入全屏时的提示文案

string

-

Press Esc to exit fullscreen

added 0.6.5

spaceToggleControlsEnabled

按空格播放/暂停时，是否唤起控制区显示

boolean

-

false

added 0.6.5

showPauseIndicator

是否展示暂停时的居中播放图标提示（仍可在设置面板运行时切换）

boolean

-

true

added 0.7.6

hotkeysEnabled

是否启用内置键盘快捷键能力（Esc 退出全屏/弹层关闭保持有效）

boolean

-

true

added 0.6.5

hotkeys

自定义快捷键映射，支持单个 code、code 数组或 false（禁用对应动作）

Partial<Record<'togglePlay'|'seekBackward'|'seekForward'|'volumeUp'|'volumeDown'|'toggleFullscreen'|'toggleMute', string | string[] | false>>

-

{}

added 0.6.5

volumeStep

键盘上下键调节音量的步进值

1 | 2 | 5 | 10 | 30

1 / 2 / 5 / 10 / 30

1

added 0.6.4

aspectRatio

视频画面比例，auto 会优先使用视频原始比例

'auto' | '16:9' | '4:3' | '21:9' | '1:1' | '9:16' | '3:2' | '2:1' | '2.39:1'

auto / 16:9 / 4:3 / 21:9 / 1:1 / 9:16 / 3:2 / 2:1 / 2.39:1

auto

added 0.6.5

play

开始播放时触发

() => void

pause

暂停播放时触发

() => void

ended

播放结束时触发

() => void

timeupdate

播放时间更新时触发

(event: Event) => void

loadedmetadata

元数据加载完成时触发

(event: Event) => void

hideControls

控制区隐藏时触发

() => void

added 0.6.4

fullscreenChange

全屏状态切换时触发

(isFullscreen: boolean) => void

added 0.6.5

play

手动播放视频，可通过参数强制取消静音

(options?: { unmute?: boolean }) => Promise<void>

-

added 0.6.4

pause

手动暂停视频

() => void

-

added 0.6.4

togglePlay

切换播放/暂停状态

(options?: { wakeControls?: boolean }) => Promise<void>

-

added 0.6.4

setFullscreen

手动设置全屏状态

(nextState?: boolean) => Promise<void>

-

added 0.6.5

toggleFullscreen

手动切换全屏状态

() => void

-

added 0.6.5

enterFullscreen

手动进入全屏

() => Promise<void>

-

added 0.6.5

exitFullscreen

手动退出全屏

() => Promise<void>

-

added 0.6.5

overlay-expand

自定义遮罩层的拓展数据

added 0.6.5

controls

自定义整体控制区布局（覆盖默认 controls 结构）

added 0.6.5

control-top

自定义顶部控制区内容，可用于展示视频名称等信息

added 0.6.5

controls-progress

自定义进度条区块（细粒度覆盖，保留默认其余控制区）

added 0.6.5

controls-left

自定义底部左侧区块（播放、音量、时间）

added 0.6.5

control-extra-left

追加到底部左侧 controls（不覆盖内置内容）

added 0.6.5

control-extra-center

追加到底部中间 controls（不覆盖内置内容）

added 0.6.5

control-extra-right

追加到底部右侧 controls（不覆盖内置内容）

added 0.6.5

controls-right

自定义底部右侧区块（设置、全屏与扩展控制）

added 0.6.5

control-right

自定义右侧控制区内容

added 0.6.4

setting-extra

扩展设置弹层内容

added 0.6.4

fullscreen-control

自定义全屏按钮内容

added 0.6.5