@nghinv/react-native-vlc
v1.1.0
Published
A `VLCPlayer` component for react-native project clone from `react-native-yz-vlcplayer`
Downloads
177
Maintainers
Readme
@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
cd to ios
run
pod init
add
pod 'MobileVLCKit', '3.3.10'
to pod filerun
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.