npm i @velkin/react
import { VuVideo } from "@velkin/react/video";| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | "" | Primary video URL. |
| poster | string | "" | Poster image URL. |
| fit | VuVideoFit | "cover" | Object-fit preset. Default: `"cover"`. |
| preload | VuVideoPreload | "metadata" | Native preload hint. Default: `"metadata"`. |
| autoplay | boolean | false | Starts playback when allowed. Default: `false`. |
| loop | boolean | false | Restarts when the clip ends. Default: `false`. |
| muted | boolean | false | Mutes audio output. Default: `false`. |
| playsinline | boolean | true | Sets `playsinline` on mobile. Default: `true`. |
| controls | boolean | true | Renders the custom control bar. Default: `true`. |
| playLabel | string | "" | Play accessible name (`playlabel` attr). |
| pauseLabel | string | "" | Pause accessible name (`pauselabel` attr). |
| muteLabel | string | "" | Mute accessible name (`mutelabel` attr). |
| unmuteLabel | string | "" | Unmute accessible name (`unmutelabel` attr). |
| fullscreenLabel | string | "" | Enter-fullscreen accessible name (`fullscreenlabel` attr). |
| exitFullscreenLabel | string | "" | Exit-fullscreen accessible name (`exitfullscreenlabel` attr). |
| seekLabel | string | "" | Seek slider accessible name (`seeklabel` attr). |
| volumeLabel | string | "" | Volume slider accessible name (`volumelabel` attr). |
| label | string | "" | Player accessible name. |
| Event | Detail | Description |
|---|---|---|
| vu-play | VuVideoPlaybackDetail | When playback starts. |
| vu-pause | VuVideoPlaybackDetail | When playback pauses. |
| vu-seek | VuVideoSeekDetail | When the user commits a seek. |
| vu-ended | VuVideoPlaybackDetail | When playback ends. |
| Slot | Description |
|---|---|
| — | - Optional `<source>` or `<track>` elements for the inner `<video>`. |
| Part | Description |
|---|---|
| base | Root layout shell. |
| video | Native `<video>` element. |
| controls | Full-screen overlay chrome. |
| top-bar | Top-right volume and fullscreen actions. |
| volume-shell | Volume button and popover anchor. |
| volume-popover | Vertical volume slider panel. |
| volume-rail | Rotated slider layout wrapper. |
| volume | Vertical volume range input. |
| bottom-bar | Bottom scrubber row. |
| seek | Progress seek slider. |
| play | Center play or pause button. |
| time-current | Elapsed time readout. |
| time-remaining | Remaining time readout. |
| mute | Volume button. |
| fullscreen | Fullscreen toggle. |
| Method | Description |
|---|---|
| play | - Starts playback. |
| pause | - Pauses playback. |
| togglePlay | - Toggles play and pause. |
| Name | Definition |
|---|---|
| VuVideoFit | |
| VuVideoPlaybackDetail | |
| VuVideoPreload | |
| VuVideoSeekDetail | |