Video
videoPlays file or HLS video with custom controls, chapters, resume, picture-in-picture, and fullscreen.
Usage
Basic usage
Input MP4 file URL, which comes with Hulian skin's playback/progress/volume/double speed/full screen controls.
<Video src="/demo/sample-video.mp4" title="Demo video" className="w-full max-w-2xl" />With poster
poster Show the cover image before the first frame is loaded.
<Video src="/demo/sample-video.mp4" poster="/demo/sample-poster.jpg" title="With poster" className="w-full max-w-2xl" />HLS stream
src Transfer .m3u8 to play the HLS live/on-demand stream.
<Video src="/demo/hls/stream.m3u8" title="HLS flow" className="w-full max-w-2xl" />Chapter Markers
chapters renders segments tick on the progress bar, hover displays chapter titles.
<Video
src="/demo/sample-video.mp4"
poster="/demo/sample-poster.jpg"
title="With Chapter Marks"
className="w-full max-w-2xl"
chapters={[
{ time: 0, title: "Opening Introduction" },
{ time: 3, title: "Core Concept" },
{ time: 6, title: "Practical Demonstration" },
{ time: 9, title: "Summary" },
]}
/>When to use
Use Video for course media, product demonstrations, or replay streams that need branded controls, chapters, resume position, and an end screen. Use Card for a static cover.
Import
import { Video, formatTime, normalizeSrc, chapterMarkers, DEFAULT_PLAYBACK_RATES } from "@hulianui/ui"Props
VideoProps:
| Name | Type | Default | Description |
|---|---|---|---|
| src* | string | { src: string; type? }[] | — | File URL, HLS .m3u8, or multiple sources. |
| poster | string | — | Poster image. |
| title | string | — | Accessible title used by internal controls. |
| autoPlay | boolean | — | Starts playback automatically. |
| muted | boolean | — | Starts muted. |
| loop | boolean | — | Repeats playback. |
| crossOrigin | boolean | string | — | Forwarded media crossorigin setting. |
| aspectRatio | string | "16/9" | CSS aspect ratio. |
| playbackRates | number[] | DEFAULT_PLAYBACK_RATES(0.5–2) | Available playback speeds. |
| chapters | VideoChapter[] | — | { time, title } segments rendered as progress ticks and hover titles. |
| startTime | number | — | One-time initial seek in seconds after media becomes playable. |
| className | string | — | Root class name. |
Events
| Event | Type | Description |
|---|---|---|
| onPlay | () => void | Playback started. |
| onPause | () => void | Playback paused. |
| onEnded | () => void | Playback ended. |
| onTimeUpdate | (currentTime: number) => void | Current time in seconds. |
Slots
| Slot | Type | Description |
|---|---|---|
| endScreen | ReactNode | Overlay shown after completion; omission leaves only replay. |
| children | ReactNode | Reserved for a future extension and currently unused. |
formatTime,chapterMarkers,normalizeSrc, andDEFAULT_PLAYBACK_RATESare exported pure helpers or constants.
Localization
Built-in play, pause, mute, speed, picture-in-picture, fullscreen, and replay
labels follow the nearest ConfigProvider locale. Both zhCN and enUS are
included. A legacy custom locale without components.video keeps the original
Chinese fallback labels instead of rendering empty accessible names.
Usage notes
- Vidstack makes Video client-only. Render it below a
"use client"boundary in Next.js. startTimeseeks once only when first playable and only above zero; later prop changes do not seek again.- Chapter ticks require a finite nonzero duration, so they are absent before metadata loads.
- Built-in Chinese controls are
"\u64ad\u653e\u901f\u5ea6"(“Playback speed”),"\u91cd\u65b0\u64ad\u653e"(“Replay”),"\u64ad\u653e\u89c6\u9891"(“Play video”),"\u64ad\u653e"/"\u6682\u505c"(“Play” / “Pause”),"\u53d6\u6d88\u9759\u97f3"/"\u9759\u97f3"(“Unmute” / “Mute”),"\u9000\u51fa\u753b\u4e2d\u753b"/"\u753b\u4e2d\u753b"(“Exit PiP” / “PiP”), and"\u9000\u51fa\u5168\u5c4f"/"\u5168\u5c4f"(“Exit fullscreen” / “Fullscreen”).
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<Video
src="/demo/sample-video.mp4"
aspectRatio="16/9"
/>