Video

A video player component with custom controls, gestures, and subtitle support.

Installation


pnpm dlx bna-ui add video

import { Video } from '@/components/ui/video';

<Video
  source={{ uri: 'https://example.com/video.mp4' }}
  autoPlay={true}
  showControls={true}
/>

The main video player component with customizable controls and features.

Prop	Type	Default	Description
`source`	`VideoSource`	-	The video source (required).
`style`	`ViewStyle`	-	Additional styles for the video container.
`seekBy`	`number`	`2`	Seconds to seek by on double tap.
`autoPlay`	`boolean`	`false`	Whether to auto-play the video.
`loop`	`boolean`	`false`	Whether to loop the video.
`muted`	`boolean`	`false`	Whether to start muted.
`nativeControls`	`boolean`	`false`	Use native video controls instead of custom ones.
`showControls`	`boolean`	`true`	Whether to show custom controls.
`allowsFullscreen`	`boolean`	`true`	Allow fullscreen mode.
`allowsPictureInPicture`	`boolean`	`true`	Allow picture-in-picture mode.
`contentFit`	`'contain' \| 'cover' \| 'fill'`	`'cover'`	How the video should fit within its container.
`onLoad`	`() => void`	-	Callback when video is loaded.
`onError`	`(error: any) => void`	-	Callback when an error occurs.
`onPlaybackStatusUpdate`	`(status: any) => void`	-	Callback for playback status updates.
`onFullscreenUpdate`	`(isFullscreen: boolean) => void`	-	Callback when fullscreen state changes.
`subtitles`	`Array<Subtitle>`	`[]`	Array of subtitle objects.

Reference methods available on the Video component.

Method	Type	Description
`play`	`() => void`	Start playing the video.
`pause`	`() => void`	Pause the video.
`seekTo`	`(seconds: number) => void`	Seek to a specific time in seconds.
`setVolume`	`(volume: number) => void`	Set the volume (0-1).
`getCurrentTime`	`() => number`	Get the current playback time.
`getDuration`	`() => number`	Get the total duration of the video.
`isPlaying`	`() => boolean`	Check if the video is currently playing.
`isMuted`	`() => boolean`	Check if the video is muted.

Subtitle object structure for the subtitles prop.

Property	Type	Description
`start`	`number`	Start time in seconds for the subtitle.
`end`	`number`	End time in seconds for the subtitle.
`text`	`string`	The subtitle text to display.

The Video component supports several gesture interactions:

The Video component is built with accessibility in mind: