React-native-video-vlc NPM

react-native-video-vlc

react-native-video-vlc is a React Native library that provides a native video component based on VLC, enabling smooth and customizable video playback in your React Native applications.

Features

Customizable video playback with support for multiple resize modes.
Audio and subtitle track selection.
Progress updates and event handling.
Native VLC capabilities for robust media handling.
Text track sideloading and delay support.

Installation

To install the library, run:

npm install react-native-video-vlc

Or with yarn:

yarn add react-native-video-vlc

Usage

Here is an example of how to use the VideoVLC component:

import { StyleSheet } from 'react-native';
import VideoVLC from 'react-native-video-vlc';

const App = () => {
  return (
    <VideoVLC
      style={styles.container}
      source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
      onProgress={(e) => console.log('Progress:', e)}
      onError={(e) => console.error('Error:', e)}
      onLoad={(e) => console.log('Video Loaded:', e)}
      onEnd={() => console.log('Video Ended')}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
export default App;

Props

Main Props

Prop	Type	Default	Description
`source`	`ReactVideoVLCSource`	`null`	Video source. Supports remote URLs or local files.
`repeat`	`boolean`	`false`	If true, the video will loop indefinitely.
`resizeMode`	`EnumValues<VideoResizeMode>`	`none`	Defines how the video should be resized within its container.
`paused`	`boolean`	`false`	Pauses the video playback when true.
`muted`	`boolean`	`false`	Mutes the audio when true.
`volume`	`number`	`100`	Sets the audio volume (0-100).
`progressUpdateInterval`	`number`	`250`	Interval (ms) for `onProgress` updates.
`selectedTextTrack`	`number`	`null`	Index of the selected text (subtitle) track.
`selectedAudioTrack`	`number`	`null`	Index of the selected audio track.
`textTrackDelay`	`number`	`0`	Delay for text (subtitle) tracks in seconds.

Source Properties

Property	Type	Default	Description
`uri`	`string \| NodeRequire`	`null`	The video source URI. Supports both remote and local sources.
`minLoadRetryCount`	`number`	`0`	Minimum retry attempts for loading.
`mediaOptions`	`string[]`	`null`	VLC-specific media options.
`headers`	`Headers`	`{}`	HTTP headers for fetching the video. A record of key-value pairs where the key is the header name and the value is the header value. Example: `{ 'Authorization': 'Bearer token' }`.
`startPosition`	`number`	`0`	Start position of the video in seconds.
`textTracks`	`SideloadTrack[]`	`[]`	Array of subtitle tracks to sideload. See `SideloadTrack` for details.

SideloadTrack

Property	Type	Description
`title`	`string`	The title of the subtitle track. Optional.
`language`	`string`	The language code of the subtitle track (e.g., 'en', 'fr'). Optional.
`uri`	`string`	URI of the subtitle file to sideload. Required.

Events

Event	Callback Parameters	Description
`onEnd`	`()`	Called when the video playback finishes.
`onBuffer`	`OnBufferData`	Triggered during buffering. Contains: `{ isBuffering: boolean }`.
`onError`	`OnVideoErrorData`	Triggered when an error occurs. Contains: `{ error: { errorString: string, errorCode: number } }`.
`onLoad`	`OnLoadData`	Called when the video is loaded. Provides detailed information. See `OnLoadData` below.
`onLoadStart`	`()`	Triggered when the video starts loading.
`onProgress`	`OnProgressData`	Called at regular intervals with progress information (in seconds). Contains: `{ currentTime: number, seekableDuration: number, progress: number }`.
`onPlaybackStateChanged`	`OnPlaybackStateChangedData`	Triggered when playback state changes. Contains: `{ isPlaying: boolean, isSeeking: boolean }`.

`OnLoadData`

The onLoad event provides the following data:

Property	Type	Description
`currentTime`	`number`	Current playback position (in seconds) when the video is loaded.
`duration`	`number`	Total duration of the video (in seconds).
`naturalSize`	`object`	Contains the video's dimensions and orientation.
`naturalSize.width`	`number`	Width of the video in pixels.
`naturalSize.height`	`number`	Height of the video in pixels.
`naturalSize.orientation`	`'landscape', 'portrait', 'square'`	The video's orientation.
`videoTracks`	`Array<{ id: number, selected: boolean, title?: string, language?: string }>`	Details of available video tracks. Each track has an ID, selection state, title (optional), and language (optional).
`audioTracks`	`Array<{ id: number, selected: boolean, title?: string, language?: string }>`	Details of available audio tracks. Each track has an ID, selection state, title (optional), and language (optional).
`textTracks`	`Array<{ id: number, selected: boolean, title?: string, language?: string }>`	Details of available text (subtitle) tracks. Each track has an ID, selection state, title (optional), and language (optional).

Enums

`VideoResizeMode`

none: Default mode.
cover: Scale the video uniformly to cover the container.
stretch: Stretch the video to fill the container.
original: Display the video in its original size.
16:9, 16:10, 4:3, 5:4, 2.35:1, 2.21:1, 2.39:1: Aspect ratio presets.

Ref Methods

The VideoVLC component exposes the following methods via a ref:

Method	Parameters	Description
`seek`	`time: number`	Seeks the video to the specified time (in seconds).

To use the ref methods, you can follow this example:

import React, { useRef } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import VideoVLC from 'react-native-video-vlc';

const App = () => {
  const videoRef = useRef(null);

  const handleSeek = () => {
    if (videoRef.current) {
      videoRef.current.seek(30); // Seek to 30 seconds
    }
  };

  return (
    <View style={styles.container}>
      <VideoVLC
        style={styles.video}
        ref={videoRef}
        source={{ uri: 'https://example.com/video.mp4' }}
        resizeMode="cover"
      />
      <Button title="Seek to 30s" onPress={handleSeek} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
  video: {
    width: '100%',
    height: 300
  }
});

export default App;