Tui

0.7.0
Video 视频播放器
TsVideo 是一个功能完整的视频播放器组件，提供丰富的播放控制能力。
支持自动播放、手动播放/暂停、进度控制、音量调节、画面比例设置与全屏播放等功能。
综合示例
演示手动播放/暂停与手动全屏方法调用，以及 control-top 和 fullscreen-control 插槽定制。同时包含 mediaInfo 右键面板与超长文本 tooltip 行为的演示。
2026-03-07_超长文件名演示_这是一段用于验证media-info-tooltip行为的文件名_包含多个描述字段_1080P_HEVC_5.1CH_Final_Release_Version.mp4
00:00
00:00 / 00:00
全屏
演示参数
long (tooltip)

右键视频打开媒体信息面板，长文件名会省略显示，悬浮可查看完整内容。

showFullscreenControl
spaceToggleControlsEnabled
showProgressHoverPreview
200ms
2000ms
1
自动
当前全屏状态: 否
hideControls: 0
onEnterFullscreen: 0
onExitFullscreen: 0
hotkeys: seekBackward=ArrowLeft, seekForward=ArrowRight（J/L 已禁用）
示例代码
vue
属性
属性名
说明
类型
可选值
默认值
版本说明
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
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
综合示例
属性
事件
方法
插槽