0
# Video Component & Props
1

2
The main Video component provides a comprehensive interface for video playback with extensive configuration options for all supported platforms.
3

4
## Capabilities
5

6
### Video Component
7

8
The primary React Native video player component implemented as a forwardRef.
9

10
```typescript { .api }
11
/**
12
 * Main video player component with comprehensive playback capabilities
13
 * @param props - Video component props
14
 * @param ref - Reference for imperative control methods
15
 * @returns React video component
16
 */
17
declare const Video: React.ForwardRefExoticComponent<
18
  ReactVideoProps & React.RefAttributes<VideoRef>
19
>;
20
```
21

22
**Usage Examples:**
23

24
```typescript
25
import React, { useRef } from "react";
26
import Video, { VideoRef } from "react-native-video";
27

28
// Basic video playback
29
<Video
30
  source={{ uri: "https://example.com/video.mp4" }}
31
  style={{ width: 300, height: 200 }}
32
  controls={true}
33
/>
34

35
// With ref for imperative control
36
const videoRef = useRef<VideoRef>(null);
37
<Video
38
  ref={videoRef}
39
  source={{ uri: "https://example.com/video.mp4" }}
40
  paused={false}
41
  onLoad={() => videoRef.current?.seek(30)}
42
/>
43
```
44

45
### ReactVideoProps Interface
46

47
Complete props interface extending ReactVideoEvents and ViewProps.
48

49
```typescript { .api }
50
/**
51
 * Props interface for the Video component
52
 * Extends ReactVideoEvents for event handling and ViewProps for styling
53
 */
54
interface ReactVideoProps extends ReactVideoEvents, ViewProps {
55
  // Media Source
56
  source?: ReactVideoSource;
57
  
58
  // Basic Playback Control
59
  paused?: boolean;
60
  rate?: number;
61
  volume?: number;
62
  muted?: boolean;
63
  repeat?: boolean;
64
  
65
  // Display & Styling
66
  style?: StyleProp<ViewStyle>;
67
  resizeMode?: "none" | "contain" | "cover" | "stretch";
68
  poster?: string | ReactVideoPoster;
69
  posterResizeMode?: "contain" | "center" | "cover" | "none" | "repeat" | "stretch";
70
  
71
  // UI Controls
72
  controls?: boolean;
73
  fullscreen?: boolean;
74
  hideShutterView?: boolean;
75
  shutterColor?: string;
76
  
77
  // Audio Configuration
78
  audioOutput?: "speaker" | "earpiece";
79
  mixWithOthers?: "inherit" | "mix" | "duck";
80
  ignoreSilentSwitch?: "inherit" | "ignore" | "obey";
81
  
82
  // Advanced Playback
83
  playInBackground?: boolean;
84
  playWhenInactive?: boolean;
85
  automaticallyWaitsToMinimizeStalling?: boolean;
86
  preventsDisplaySleepDuringVideoPlayback?: boolean;
87
  
88
  // Track Selection
89
  selectedAudioTrack?: SelectedTrack;
90
  selectedTextTrack?: SelectedTrack;
91
  selectedVideoTrack?: SelectedVideoTrack;
92
  subtitleStyle?: SubtitleStyle;
93
  
94
  // Streaming & Buffering
95
  bufferConfig?: BufferConfig;
96
  bufferingStrategy?: "Default" | "DisableBuffering" | "DependingOnMemory";
97
  reportBandwidth?: boolean;
98
  maxBitRate?: number;
99
  minLoadRetryCount?: number;
100
  progressUpdateInterval?: number;
101
  
102
  // Platform Features
103
  allowsExternalPlayback?: boolean;
104
  enterPictureInPictureOnLeave?: boolean;
105
  showNotificationControls?: boolean;
106
  disableDisconnectError?: boolean;
107
  
108
  // Android Specific
109
  viewType?: 0 | 1 | 2; // TEXTURE | SURFACE | SURFACE_SECURE
110
  useTextureView?: boolean;
111
  useSecureView?: boolean;
112
  focusable?: boolean;
113
  disableFocus?: boolean;
114
  currentPlaybackTime?: number;
115
  controlsStyles?: ControlsStyles;
116
  
117
  // iOS Specific
118
  fullscreenAutorotate?: boolean;
119
  fullscreenOrientation?: "all" | "landscape" | "portrait";
120
  chapters?: Chapters[];
121
  filter?: string;
122
  filterEnabled?: boolean;
123
  preferredForwardBufferDuration?: number;
124
  disableAudioSessionManagement?: boolean;
125
  
126
  // Web Specific
127
  renderLoader?: ReactNode | ((props: ReactVideoRenderLoaderProps) => ReactNode);
128
  
129
  // Debug & Testing
130
  debug?: DebugConfig;
131
  testID?: string;
132
  
133
  // Deprecated Props (included for compatibility)
134
  drm?: Drm;
135
  adTagUrl?: string;
136
  adLanguage?: string;
137
  bufferConfig?: BufferConfig;
138
  contentStartTime?: number;
139
  textTracks?: TextTracks;
140
  localSourceEncryptionKeyScheme?: string;
141
}
142
```
143

144
### Media Source Configuration
145

146
```typescript { .api }
147
/**
148
 * Video source configuration supporting various media types and features
149
 */
150
interface ReactVideoSource {
151
  uri?: string | NodeRequire;
152
  headers?: Record<string, string>;
153
  drm?: Drm;
154
  textTracks?: TextTracks;
155
  startPosition?: number;
156
  cropStart?: number;
157
  cropEnd?: number;
158
  contentStartTime?: number;
159
  metadata?: VideoMetadata;
160
  ad?: AdConfig;
161
  cmcd?: boolean | CmcdConfiguration;
162
  bufferConfig?: BufferConfig;
163
  minLoadRetryCount?: number;
164
  textTracksAllowChunklessPreparation?: boolean;
165
}
166
```
167

168
### Display Configuration
169

170
```typescript { .api }
171
/**
172
 * Poster image configuration
173
 */
174
interface ReactVideoPoster {
175
  source?: { uri: string } | number;
176
  style?: StyleProp<ImageStyle>;
177
  resizeMode?: "contain" | "center" | "cover" | "none" | "repeat" | "stretch";
178
}
179

180
/**
181
 * Subtitle styling options (Android)
182
 */
183
interface SubtitleStyle {
184
  fontSize?: number;
185
  paddingTop?: number;
186
  paddingBottom?: number;
187
  paddingLeft?: number;
188
  paddingRight?: number;
189
  opacity?: number;
190
  subtitlesFollowVideo?: boolean;
191
}
192

193
/**
194
 * Controls customization (Android)
195
 */
196
interface ControlsStyles {
197
  hideSeekBar?: boolean;
198
  hideDuration?: boolean;
199
  hidePosition?: boolean;
200
  hidePlayPause?: boolean;
201
  hideForward?: boolean;
202
  hideRewind?: boolean;
203
  hideNext?: boolean;
204
  hidePrevious?: boolean;
205
  hideFullscreen?: boolean;
206
  hideNavigationBarOnFullScreenMode?: boolean;
207
  hideNotificationBarOnFullScreenMode?: boolean;
208
  hideSettingButton?: boolean;
209
  seekIncrementMS?: number;
210
  liveLabel?: string;
211
}
212
```
213

214
### Track Selection
215

216
```typescript { .api }
217
/**
218
 * Audio and text track selection
219
 */
220
interface SelectedTrack {
221
  type: "system" | "disabled" | "title" | "language" | "index";
222
  value?: string | number;
223
}
224

225
/**
226
 * Video quality track selection (Android)
227
 */
228
interface SelectedVideoTrack {
229
  type: "auto" | "disabled" | "resolution" | "index";
230
  value?: string | number;
231
}
232
```
233

234
### Buffer Configuration
235

236
```typescript { .api }
237
/**
238
 * Buffering behavior configuration
239
 */
240
interface BufferConfig {
241
  minBufferMs?: number;
242
  maxBufferMs?: number;
243
  bufferForPlaybackMs?: number;
244
  bufferForPlaybackAfterRebufferMs?: number;
245
  backBufferDurationMs?: number;
246
  maxHeapAllocationPercent?: number;
247
  minBackBufferMemoryReservePercent?: number;
248
  minBufferMemoryReservePercent?: number;
249
  initialBitrate?: number;
250
  cacheSizeMB?: number;
251
  live?: BufferConfigLive;
252
}
253

254
/**
255
 * Live streaming buffer configuration
256
 */
257
interface BufferConfigLive {
258
  maxPlaybackSpeed?: number;
259
  minPlaybackSpeed?: number;
260
  maxOffsetMs?: number;
261
  minOffsetMs?: number;
262
  targetOffsetMs?: number;
263
}
264
```
265

266
### iOS Specific Types
267

268
```typescript { .api }
269
/**
270
 * Chapter information for iOS
271
 */
272
interface Chapters {
273
  title: string;
274
  startTime: number;
275
  endTime: number;
276
  uri?: string;
277
}
278

279
/**
280
 * Debug configuration
281
 */
282
interface DebugConfig {
283
  enable?: boolean;
284
  thread?: boolean;
285
}
286
```
287

288
**Usage Examples:**
289

290
```typescript
291
// Advanced video configuration
292
<Video
293
  source={{
294
    uri: "https://example.com/video.m3u8",
295
    headers: { "Authorization": "Bearer token" },
296
    metadata: {
297
      title: "Sample Video",
298
      artist: "Video Creator"
299
    }
300
  }}
301
  style={{ flex: 1 }}
302
  controls={true}
303
  resizeMode="contain"
304
  paused={false}
305
  rate={1.0}
306
  volume={0.8}
307
  muted={false}
308
  repeat={false}
309
  selectedAudioTrack={{ type: "language", value: "en" }}
310
  selectedTextTrack={{ type: "language", value: "en" }}
311
  bufferConfig={{
312
    minBufferMs: 2000,
313
    maxBufferMs: 10000,
314
    bufferForPlaybackMs: 1000
315
  }}
316
  onLoad={(data) => console.log("Duration:", data.duration)}
317
  onProgress={(data) => console.log("Progress:", data.currentTime)}
318
  onError={(error) => console.error("Error:", error)}
319
/>
320

321
// iOS specific features
322
<Video
323
  source={{ uri: "video.mp4" }}
324
  fullscreenOrientation="landscape"
325
  chapters={[
326
    { title: "Intro", startTime: 0, endTime: 30 },
327
    { title: "Main Content", startTime: 30, endTime: 300 }
328
  ]}
329
  ignoreSilentSwitch="ignore"
330
/>
331

332
// Android specific features
333
<Video
334
  source={{ uri: "video.mp4" }}
335
  viewType={1} // SURFACE
336
  useSecureView={true}
337
  controlsStyles={{
338
    hideSeekBar: false,
339
    seekIncrementMS: 15000,
340
    liveLabel: "LIVE"
341
  }}
342
/>
343
```