Video
video视频播放器 · Vidstack 引擎 + 瑚琏 token 自搓皮肤(播放/进度/音量/倍速/PiP/全屏) + 文件/HLS + 章节标记/续播/结束屏
用法
基础用法
传入 MP4 文件 URL，自带瑚琏皮肤的播放/进度/音量/倍速/全屏控件。
tsx
<Video src="/demo/sample-video.mp4" title="演示视频" className="w-full max-w-2xl" />带海报
poster 在首帧加载前展示封面图。
tsx
<Video src="/demo/sample-video.mp4" poster="/demo/sample-poster.jpg" title="带海报" className="w-full max-w-2xl" />HLS 流
src 传 .m3u8 即播放 HLS 直播/点播流。
tsx
<Video src="/demo/hls/stream.m3u8" title="HLS 流" className="w-full max-w-2xl" />章节标记
chapters 在进度条上渲染分段 tick，hover 显示章节标题。
tsx
<Video
src="/demo/sample-video.mp4"
poster="/demo/sample-poster.jpg"
title="带章节标记"
className="w-full max-w-2xl"
chapters={[
{ time: 0, title: "开场介绍" },
{ time: 3, title: "核心概念" },
{ time: 6, title: "实战演示" },
{ time: 9, title: "总结" },
]}
/>何时用
播放视频文件或 HLS 流并需要瑚琏风格控件——课程视频、产品演示、直播回放。本组件用 Vidstack 作引擎、自搓皮肤(播放/进度/音量/倍速/PiP/全屏)，并支持章节标记、续播定位、结束屏。相关组件里没有同类播放器，纯静态封面用 Card 即可。
导入
ts
import { Video, formatTime, normalizeSrc, chapterMarkers, DEFAULT_PLAYBACK_RATES } from "@hulianui/ui"Props
VideoProps：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| src* | string | { src: string; type? }[] | — | 文件 URL / HLS .m3u8 / 多源数组 |
| poster | string | — | 海报图 |
| title | string | — | 无障碍标题，也用于内部 aria |
| autoPlay | boolean | — | 自动播放 |
| muted | boolean | — | 静音 |
| loop | boolean | — | 循环 |
| crossOrigin | boolean | string | — | 透传给底层 media 的 crossorigin |
| aspectRatio | string | "16/9" | CSS aspect-ratio |
| playbackRates | number[] | DEFAULT_PLAYBACK_RATES(0.5–2) | 倍速档位 |
| chapters | VideoChapter[] | — | 章节分段({ time, title })：进度条按 time/duration 渲染 tick，hover 显示标题 |
| startTime | number | — | 续播：可播放后 seek 到此秒(仅初始一次，>0 才生效) |
| className | string | — | — |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onPlay | () => void | 开始播放回调 |
| onPause | () => void | 暂停回调 |
| onEnded | () => void | 播放结束回调 |
| onTimeUpdate | (currentTime: number) => void | 播放进度回调(秒) |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| endScreen | ReactNode | 播完浮现的结束屏内容(如「下一节」卡片)；为空则只给重播按钮 |
| children | ReactNode | v1 预留扩展位，未实现 |
导出的formatTime/chapterMarkers/normalizeSrc/DEFAULT_PLAYBACK_RATES为辅助纯函数/常量。
禁忌 / 坑
- 依赖 Vidstack 引擎，是 client-only 组件——在 Next.js RSC 里须放进
"use client"边界，别在 server component 直接渲染。 startTime只在媒体首次可播放时 seek 一次且需>0；运行中改它不会重新定位。chapters的 tick 位置靠time/duration计算，duration未知(0/NaN)时不渲染标记——海报态/未加载时看不到 tick 属正常。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Video
src="/demo/sample-video.mp4"
aspectRatio="16/9"
/>