Documentation Index
Fetch the complete documentation index at: https://mintlify.com/TheWidlarzGroup/react-native-video/llms.txt
Use this file to discover all available pages before exploring further.
VideoSource
Represents the source of a video, which can be either a remote URL (string) or a local asset (number from require()).
type VideoSource = number | string;
Usage
Remote Video URL
Pass a string URL to load a video from a remote server:
import { VideoPlayer } from 'react-native-video';
const player = VideoPlayer.create({
uri: 'https://example.com/video.mp4'
});
Local Video Asset
Pass the result of require() to load a video bundled with your app:
import { VideoPlayer } from 'react-native-video';
const player = VideoPlayer.create({
uri: require('./assets/intro-video.mp4')
});
The specific video formats supported depend on the platform:
Android
- MP4 (H.264, H.265)
- WebM
- 3GP
- MKV
- HLS (.m3u8)
- DASH (.mpd)
iOS/visionOS/tvOS
- MP4 (H.264, H.265/HEVC)
- MOV
- M4V
- HLS (.m3u8)
Examples
Basic Usage
// Remote video
const remoteVideo: VideoSource = 'https://example.com/video.mp4';
// Local asset
const localVideo: VideoSource = require('./video.mp4');
With VideoConfig
import { VideoConfig } from 'react-native-video';
const config: VideoConfig = {
uri: 'https://example.com/video.mp4',
headers: {
'Authorization': 'Bearer token123'
}
};
HLS Streaming
const hlsVideo: VideoSource = 'https://example.com/stream/playlist.m3u8';
const player = VideoPlayer.create({
uri: hlsVideo,
bufferConfig: {
livePlayback: {
targetOffsetMs: 3000
}
}
});
DASH Streaming (Android)
const dashVideo: VideoSource = 'https://example.com/stream/manifest.mpd';
const player = VideoPlayer.create({
uri: dashVideo
});
Type Safety
When using TypeScript, the VideoSource type ensures you can only pass valid source types:
import { VideoSource } from 'react-native-video';
// Valid
const validSource1: VideoSource = 'https://example.com/video.mp4';
const validSource2: VideoSource = require('./video.mp4');
// TypeScript error - objects are not valid
const invalid: VideoSource = { uri: 'video.mp4' }; // Error!
- VideoConfig - Complete video configuration including the source URI