Nature's Particle Manager

    @nghinv/react-native-vlc
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    @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.

    Install

    npm i @nghinv/react-native-vlc

    DownloadsWeekly Downloads

    20

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    808 kB

    Total Files

    71

    Last publish

    Collaborators

    • nghinv