react-native-video-controls-subtitle

This package is forked from awesome-react-native-video-controls. Enhance functionality for react native video Controls available at react-native-video-controls

Features

SUBTITLE SUPPORT ADDED In This package, you can pass a function as 'toggleFullscreen' prop to component to control the functionality of toggle fullscreen button.

You can find other features in [react-native-video-controls] (https://github.com/react-native-community/react-native-video-controls) and react-native-video pages.

Installation

Run npm install --save react-native-video @skilled-apps/react-native-video-with-subtitles

If you are using RN<0.59 Then run react-native link react-native-video

##SUBTITLE In order to use subtitles you should follow the below instructions : First if your subtitle format is srt you should convert it to JSON(use websites like : http://multiverso.me/srtToJSON/) Then when you got the array of JSONs, you can pass this array to VideoPlayer as below :

<VideoPlayer
   subtitle={this.props.subtitle}
/>

##SUBTITLE STYLES In order to use custom styles :

<VideoPlayer
   subtitleContainerStyle={this.props.subtitleContainerStyle}
   subtitleStyle={this.props.subtitleStyle}
/>

The subtitle prop expects the JSON to have the following key-value format:

[{
   "startTime": "00:00:04,123", //hh:mm:ss,SSS
   "endTime": "00:00:05,001",
   "text": "When you convert your subtitle file, you might need to modify your JSON"
},
{
   "startTime": "00:00:08,008",
   "endTime": "00:00:09,876",
   "text": "Before passing it to the VidePlayer component"
}]

OTHER FEATURES AND USAGE

The <VideoPlayer> component can take a number of inputs to customize it as needed. They are outlined below: The <VideoPlayer> component follows the API of the <Video> component at react-native-video and react-native-video-controls

take a number of inputs to customize it as needed. They are outlined below:

// At the top where our imports are...
import VideoPlayer from '@skilled-apps/react-native-video-with-subtitles';

// in the component's render() function
<VideoPlayer
    source={{ uri: 'https://vjs.zencdn.net/v/oceans.mp4' }}
    navigator={ this.props.navigator }
    toggleFullscreen={YourCustomizedFunction}
    subtitle={this.props.subtitle}
/>