A comprehensive React Native video player component with streaming, DRM, and Picture-in-Picture support
—
Comprehensive video source configuration supporting local files, network streams, DRM-protected content, text tracks, metadata, advertisements, and advanced streaming features.
Main interface for configuring video sources with all available options.
/**
* Complete video source configuration interface
* Supports local files, network streams, DRM, text tracks, and advanced features
*/
interface ReactVideoSource {
uri?: string | NodeRequire;
headers?: Record<string, string>;
drm?: Drm;
textTracks?: TextTracks;
startPosition?: number;
cropStart?: number;
cropEnd?: number;
contentStartTime?: number;
metadata?: VideoMetadata;
ad?: AdConfig;
cmcd?: boolean | CmcdConfiguration;
bufferConfig?: BufferConfig;
minLoadRetryCount?: number;
textTracksAllowChunklessPreparation?: boolean;
}Usage Examples:
// Basic network stream
const basicSource = {
uri: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
};
// Local file (iOS/Android)
const localSource = {
uri: "video.mp4" // File in bundle
};
// Require-based local file
const requireSource = {
uri: require("./assets/video.mp4")
};
// Advanced network stream with headers
const advancedSource = {
uri: "https://example.com/protected-video.m3u8",
headers: {
"Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"User-Agent": "MyApp/1.0"
},
startPosition: 30, // Start at 30 seconds
metadata: {
title: "Protected Content",
artist: "Content Creator",
description: "DRM protected video stream"
}
};Digital Rights Management configuration for protected content.
/**
* DRM configuration for protected content playback
* Supports major DRM systems across platforms
*/
interface Drm {
type?: "widevine" | "playready" | "clearkey" | "fairplay";
licenseServer?: string;
headers?: Record<string, string>;
contentId?: string;
certificateUrl?: string;
base64Certificate?: boolean;
multiDrm?: boolean;
localSourceEncryptionKeyScheme?: string;
getLicense?: (
spcBase64: string,
contentId: string,
licenseUrl: string,
loadedLicenseUrl: string
) => string | Promise<string>;
}
/**
* DRM system types
*/
enum DRMType {
WIDEVINE = "widevine",
PLAYREADY = "playready",
CLEARKEY = "clearkey",
FAIRPLAY = "fairplay"
}Usage Examples:
// Widevine DRM (Android)
const widevineSource = {
uri: "https://storage.googleapis.com/wvmedia/clear/h264/tears/tears.mpd",
drm: {
type: "widevine",
licenseServer: "https://proxy.uat.widevine.com/proxy?provider=widevine_test",
headers: {
"X-AxDRM-Message": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}
}
};
// FairPlay DRM (iOS)
const fairplaySource = {
uri: "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8",
drm: {
type: "fairplay",
licenseServer: "https://fps.ezdrm.com/api/licenses/09cc0377-6dd4-40cb-b09d-b582236e70fe",
certificateUrl: "https://fps.ezdrm.com/demo/video/eleisure.cer",
contentId: "09cc0377-6dd4-40cb-b09d-b582236e70fe"
}
};
// Custom license acquisition
const customLicenseSource = {
uri: "https://example.com/drm-content.m3u8",
drm: {
type: "fairplay",
getLicense: async (spcBase64, contentId, licenseUrl, loadedLicenseUrl) => {
const response = await fetch(licenseUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/octet-stream' },
body: spcBase64
});
return await response.text();
}
}
};Subtitle and caption track configuration.
/**
* Text track definitions for subtitles and captions
*/
type TextTracks = {
title: string;
language: string; // ISO639_1 language code
type: "application/x-subrip" | "application/ttml+xml" | "text/vtt";
uri: string;
}[];
/**
* Text track types
*/
enum TextTrackType {
SUBRIP = "application/x-subrip",
TTML = "application/ttml+xml",
VTT = "text/vtt"
}Usage Examples:
// Multiple subtitle tracks
const sourceWithSubtitles = {
uri: "https://example.com/video.mp4",
textTracks: [
{
title: "English Subtitles",
language: "en",
type: "text/vtt",
uri: "https://example.com/subtitles-en.vtt"
},
{
title: "Spanish Subtitles",
language: "es",
type: "text/vtt",
uri: "https://example.com/subtitles-es.vtt"
},
{
title: "French Subtitles",
language: "fr",
type: "application/x-subrip",
uri: "https://example.com/subtitles-fr.srt"
}
]
};Metadata information for media controls and notifications.
/**
* Video metadata for media controls and notifications
*/
interface VideoMetadata {
title?: string;
subtitle?: string;
description?: string;
artist?: string;
imageUri?: string;
}Usage Examples:
// Rich metadata for media controls
const sourceWithMetadata = {
uri: "https://example.com/video.mp4",
metadata: {
title: "Big Buck Bunny",
subtitle: "Episode 1",
description: "A large and lovable rabbit deals with three tiny bullies",
artist: "Blender Foundation",
imageUri: "https://example.com/poster.jpg"
}
};Advertisement integration using IMA SDK.
/**
* Advertisement configuration for IMA SDK integration
*/
interface AdConfig {
adTagUrl?: string;
adLanguage?: string; // ISO639_1 language code
}Usage Examples:
// Video with pre-roll advertisement
const sourceWithAds = {
uri: "https://example.com/main-video.mp4",
ad: {
adTagUrl: "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=",
adLanguage: "en"
}
};Common Media Client Data for streaming analytics.
/**
* CMCD (Common Media Client Data) configuration for streaming analytics
* Platform: Android
*/
type Cmcd = boolean | CmcdConfiguration;
interface CmcdConfiguration {
mode?: CmcdMode;
request?: CmcdData;
session?: CmcdData;
object?: CmcdData;
status?: CmcdData;
}
enum CmcdMode {
MODE_REQUEST_HEADER = 0,
MODE_QUERY_PARAMETER = 1
}
/**
* Custom CMCD data with hyphenated prefix
*/
type CmcdData = Record<`${string}-${string}`, string | number>;Usage Examples:
// Basic CMCD enablement
const sourceWithBasicCMCD = {
uri: "https://example.com/video.m3u8",
cmcd: true // Uses default query parameter mode
};
// Advanced CMCD configuration
const sourceWithAdvancedCMCD = {
uri: "https://example.com/video.m3u8",
cmcd: {
mode: 1, // MODE_QUERY_PARAMETER
session: {
"com-example-sessionid": "abc123",
"com-example-userid": "user456"
},
request: {
"com-example-cdn": "cloudfront"
}
}
};Fine-grained buffering behavior control.
/**
* Buffer configuration for streaming optimization
*/
interface BufferConfig {
minBufferMs?: number;
maxBufferMs?: number;
bufferForPlaybackMs?: number;
bufferForPlaybackAfterRebufferMs?: number;
backBufferDurationMs?: number;
maxHeapAllocationPercent?: number;
minBackBufferMemoryReservePercent?: number;
minBufferMemoryReservePercent?: number;
initialBitrate?: number;
cacheSizeMB?: number;
live?: BufferConfigLive;
}
/**
* Live streaming specific buffer configuration
*/
interface BufferConfigLive {
maxPlaybackSpeed?: number;
minPlaybackSpeed?: number;
maxOffsetMs?: number;
minOffsetMs?: number;
targetOffsetMs?: number;
}Usage Examples:
// Optimized for low latency live streaming
const liveStreamSource = {
uri: "https://example.com/live-stream.m3u8",
bufferConfig: {
minBufferMs: 1000,
maxBufferMs: 3000,
bufferForPlaybackMs: 500,
live: {
maxPlaybackSpeed: 1.1,
minPlaybackSpeed: 0.9,
targetOffsetMs: 2000
}
}
};
// Optimized for high quality VOD
const vodSource = {
uri: "https://example.com/high-quality-video.mp4",
bufferConfig: {
minBufferMs: 5000,
maxBufferMs: 30000,
bufferForPlaybackMs: 2000,
initialBitrate: 1000000,
cacheSizeMB: 100
}
};Additional source configuration options for specific use cases.
/**
* Additional source configuration options
*/
interface ReactVideoSourceProperties {
// Playback positioning
startPosition?: number;
cropStart?: number;
cropEnd?: number;
contentStartTime?: number;
// Network configuration
minLoadRetryCount?: number;
// Text track options
textTracksAllowChunklessPreparation?: boolean;
// Internal properties (typically auto-detected)
isNetwork?: boolean;
isAsset?: boolean;
isLocalAssetFile?: boolean;
shouldCache?: boolean;
type?: string;
mainVer?: number;
patchVer?: number;
}Usage Examples:
// Video with precise timing control
const preciseTimingSource = {
uri: "https://example.com/long-video.mp4",
startPosition: 300, // Start at 5 minutes
cropStart: 60, // Skip first minute of content
cropEnd: 3600, // End at 1 hour mark
minLoadRetryCount: 5 // Retry failed loads 5 times
};
// Optimized text track loading
const optimizedTextSource = {
uri: "https://example.com/video.mp4",
textTracks: [
{
title: "English",
language: "en",
type: "text/vtt",
uri: "https://example.com/subs-en.vtt"
}
],
textTracksAllowChunklessPreparation: true
};Install with Tessl CLI
npx tessl i tessl/npm-react-native-video