Skip to main content

​
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')
});

​
Supported Formats

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