CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-video

A comprehensive React Native video player component with streaming, DRM, and Picture-in-Picture support

Pending
Overview
Eval results
Files

video-sources.mddocs/

Video Sources & Configuration

Comprehensive video source configuration supporting local files, network streams, DRM-protected content, text tracks, metadata, advertisements, and advanced streaming features.

Capabilities

ReactVideoSource Interface

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"
  }
};

DRM Configuration

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();
    }
  }
};

Text Tracks Configuration

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"
    }
  ]
};

Video Metadata

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 Configuration

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"
  }
};

CMCD Configuration

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"
    }
  }
};

Buffer Configuration

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
  }
};

Advanced Source Options

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
};

Platform Support

Supported Protocols

  • HLS (HTTP Live Streaming): All platforms
  • DASH (Dynamic Adaptive Streaming): Android (ExoPlayer extension)
  • SmoothStreaming: Android (ExoPlayer extension)
  • RTSP: Android (ExoPlayer extension)
  • HTTP/HTTPS: All platforms
  • Local files: All platforms

DRM Support Matrix

  • iOS: FairPlay Streaming (FPS)
  • Android: Widevine, PlayReady, ClearKey
  • Windows: PlayReady
  • Web: Widevine (Chrome), PlayReady (Edge), FairPlay (Safari)

File Format Support

  • Video Codecs: H.264, H.265/HEVC (platform dependent), VP8, VP9
  • Audio Codecs: AAC, MP3, Opus, Vorbis
  • Containers: MP4, MOV, AVI, MKV, WebM, M3U8, MPD

Install with Tessl CLI

npx tessl i tessl/npm-react-native-video

docs

event-handling.md

expo-configuration.md

index.md

platform-features.md

video-component.md

video-ref-methods.md

video-sources.md

tile.json