LivePlayer
live-playerPresents a live video surface with status, viewer count, controls, and overlays.
Usage
Basic usage
Pass src and play (internally fixed muted/loop/autoPlay); LIVE breathing logo is turned on by default.
<div className="w-full max-w-xl">
<LivePlayer src="/stream.mp4" viewers={12840} />
</div>Anchor strip + follow
host incoming anchor information; when onFollow is used, the follow button is rendered, and followed is switched to "Followed".
<LivePlayer
src="/stream.mp4"
viewers={12840}
host={{
name: "Excellent products·Anchor Anan",
meta: "Fan 28.6w",
onFollow: () => follow(),
}}
/>Clarity menu + bottom interactive bar
qualities rendering resolution switching menu; footer slot for interactive bar. A full controlled example can be found below.
<LivePlayer
src="/stream.mp4"
viewers={12840}
qualities={["Blu-ray", "UHD", "HD", "SD"]}
quality={quality}
onQualityChange={setQuality}
host={{ name: "Anchor Anan", meta: "Fans 28.6w", followed, onFollow }}
footer={<div className="bg-gradient-to-t from-black/50 to-transparent p-3 text-xs text-white/80">Say something...</div>}
/>Vertical screen immersion
orientation="portrait" Lock 9/16 vertical screen ratio, for mobile live broadcast room.
<div className="w-56">
<LivePlayer src="/stream.mp4" orientation="portrait" viewers={12840} />
</div>When to use
Use LivePlayer for livestream semantics without VOD scrubber controls. Use Video for seekable playback. Pair overlay with Danmaku.
Import
import { LivePlayer } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | — | Video source played muted, looping, autoplay, and inline. |
| poster | string | — | Poster image. |
| live | boolean | true | Shows the LIVE badge. |
| viewers | number | — | Animated viewer count. |
| qualities | string[] | — | Quality options. |
| quality | string | — | Controlled current quality. |
| host | LivePlayerHost | — | Host row. |
| orientation | "portrait" | "landscape" | "landscape" | Layout orientation. |
| aspectRatio | string | — | CSS ratio; defaults to 16/9 or 9/16, while "fill" fills the parent. |
| className | string | — | Container class. |
Events
| Event | Type | Description |
|---|---|---|
| onQualityChange | (q: string) => void | Quality selection. |
Slots
| Slot | Type | Description |
|---|---|---|
| surface | ReactNode | Custom scene taking precedence over src. |
| overlay | ReactNode | Danmaku, reactions, or gifts above the scene. |
| footer | ReactNode | Interaction bar. |
LivePlayerHost is { name; avatar?; followed?; onFollow?; meta? }; the follow control appears only with onFollow.
Example
<LivePlayer src="/stream.mp4" viewers={12840}
qualities={["Blu-ray", "Ultra", "HD"]} quality={quality} onQualityChange={setQuality}
host={{ name: "Host Nan", meta: "286K followers", followed, onFollow: () => setFollowed(true) }}
overlay={<Danmaku items={items} />} footer={<InteractionBar />} />Usage notes
- Quality is controlled; write changes back.
- Omit host.onFollow for display-only host details.
- Surface overrides src. The built-in video intentionally exposes no VOD controls.
- Follow-state copy follows
ConfigProvider locale;enUSprovides “+ Follow / Following”, and the no-provider fallback remains Chinese.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable