umangloria/react-native-vlc

Play video with vlc

@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

Property	Type	Default	Description
rate	number
seek	number
resume	boolean
position	number
snapshotPath	string
paused	boolean
autoAspectRatio	boolean
videoAspectRatio	string	16:9
volume	number		from 0 to 200
volumeUp	number
volumeDown	number
repeat	boolean
muted	boolean
hwDecoderForced	number	0, 1	(Only android) need use with hwDecoderForced
hwDecoderEnabled	number	0, 1	Only android) need use with hwDecoderEnabled
style	ViewStyle
onVideoLoadStart	func
onVideoStateChange	func
onVideoProgress	func
onSnapshot	func
onIsPlaying	func
onOpen	func
onLoadStart	func
source	oject, number
play	func
snapshot	func
onError	func
onProgress	func		{ currentTime:1000,duration:1000 } unit：ms
onEnded	func
onStopped	func
onPlaying	func
onPaused	func
scaleX	number
scaleY	number
translateX	number
translateY	number
rotation	number

VlCPlayerView component

Property	Type	Default	Description
style	ViewStyle
videoStyle	ViewStyle
initPaused	boolean	false
source	oject, number		{ uri: 'http:...' }
seek	number	0
playInBackground	boolean	false
isAd	boolean	false
showAd	boolean	false
adUrl	string
autoplay	boolean	true
fullVideoAspectRatio	string
videoAspectRatio	string
errorTitle	string	Video playback error, please reload
height	number	250
url	string		url of video
showBack	boolean	false
showTitle	boolean	false
title	string
showGoLive	boolean	false
showLeftButton	boolean	true
showMiddleButton	boolean	true
showRightButton	boolean	true
animationLayout	boolean	true
titleGolive	string	Go live	show when showGoLive true
onEnd	func
onAdEnd	func
startFullScreen	func
closeFullScreen	func
onLeftPress	func
onGoLivePress	func
onReplayPress	func
onVLCProgress	func
onVLCEnded	func
onVLCError	func
onVLCBuffering	func
BackHandle		undefined	BackAndroid
Orientation		undefined	react-native-orientation-locker

Supported formats

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