@nghinv/react-native-vlc v1.1.0

@nghinv/react-native-vlc

A VLCPlayer component for react-native project clone from react-native-yz-vlcplayer

Installation

Installing the package

• Use yarn

yarn add @nghinv/react-native-vlc

• Use npm

npm install @nghinv/react-native-vlc

Dependencies

• react-native-vector-icons

• react-native-slider

android

• With autolinking (react-native 0.60+)

• Pre 0.60

Run react-native link @nghinv/react-native-vlc

ios

• With autolinking (react-native 0.60+)

Run cd ios && pod install

• Pre 0.60

Use framework

1. cd to ios

2. run pod init

3. add pod 'MobileVLCKit', '3.3.10' to pod file

4. run pod install

• Enable Bitcode

In root project select Build Settings ---> find Bitcode and select Enable Bitcode

• Remove DSYM

In root project select Build Settings --> Build Options --> Debug Information is set to DWARF.

Example

  (1) import { VLCPlayer, VlCPlayerView } from '@nghinv/react-native-vlc';

  (2) 
    <VLCPlayer
      ref={ref => (this.vlcPlayer = ref)}
      style={[styles.video]}
      videoAspectRatio="16:9"
      paused={this.state.paused}
      source={{ uri: this.props.uri}}
      onProgress={this.onProgress.bind(this)}
      onEnd={this.onEnded.bind(this)}
      onBuffering={this.onBuffering.bind(this)}
      onError={this._onError}
      onStopped={this.onStopped.bind(this)}   
      onPlaying={this.onPlaying.bind(this)}
      onPaused={this.onPaused.bind(this)}      
    />
  (3) or use
    <VlCPlayerView
      autoplay={false}
      url={this.state.url}
      Orientation={Orientation}      
      BackHandle={BackHandle}
      showTitle={true}
      title=""
      showBack={true}
      onLeftPress={()=>{}}
      startFullScreen={() => {      
        this.setState({
        isFull: true,
        });
      }}
      closeFullScreen={() => {
        this.setState({
        isFull: false,
        });
      }}
    />

Property

VLCPlayer component

VlCPlayerView component

Supported formats

Supported formats mp4, m3u8, flv,mov, rtsp, rtmp, etc.