ghondar / react-native-vlc-player

VLC Player for react-native

react-native-vlc-player

Getting started

$ npm install react-native-vlc-player --save

Dependencies

$ npm install react-native-vector-icons --save

Manual installation

Copy Ionicons.ttf from node_modules/react-native-vector-icons/Fonts to android/app/src/main/assets/fonts

Android

1. Insert the following lines inside the dependencies block in android/app/build.gradle:

...
allprojects {
	...
	dependencies {
			...
+      maven {
+        url("https://jitpack.io")
+      }
	}
}

Usage

import React, {Component} from 'react';
import {
  StyleSheet,
  View
} from 'react-native';
// Import library
import VlcPlayer from 'react-native-vlc-player';

export default class App extends Component {
  vlcplayer = React.createRef();

  componentDidMount() {
    console.log(this.vlcplayer)
  }

  render() {
    return (
      <View
        style={[
          styles.container
        ]}>
        <VlcPlayer
          ref={this.vlcplayer}
          style={{
            width: 300,
            height: 200,
          }}
          paused={false}
          autoplay={true}
          source={{
            uri: 'file:///storage/emulated/0/Download/example.mp4',
            autoplay: true,
            initOptions: ['--codec=avcodec'],
          }}  />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey',
  },
});

Props

<VLCPlayer
	ref='vlcplayer'
	paused={this.state.paused}
	style={styles.vlcplayer}
	source={{uri: this.props.uri, initOptions: ['--codec=avcodec']}}
	onVLCProgress={this.onProgress.bind(this)}
	onVLCEnded={this.onEnded.bind(this)}
	onVLCStopped={this.onEnded.bind(this)}
	onVLCPlaying={this.onPlaying.bind(this)}
	onVLCBuffering={this.onBuffering.bind(this)}
	onVLCPaused={this.onPaused.bind(this)}
/>

Static Methods

seek(seconds)

this.refs['vlcplayer'].seek(0.333);

snapshot(path)

this.refs['vlcplayer'].snapshot(path);

react-native-vlc-player's Issues

how do I play a song located in repo?

is there a way to require a file and play it ?

Support RTSP?

Customizing the player

Hi,
Nice work!

I integrated the plugin in my app but when it opens seems like it opens over all screens so I have some popups to show and they won't. Is there anyway we can use the video player as background of screen so all the elements come over?

The other question is how can we remove play/pause control from the video?

Thanks in advance.

missing 'Platform' refrence from 'react-native'

Hi
first of all, thank you for this great job!

it seems that there is a bug on changing orientation.
I added "Platform" reference at top of src/Orientation.js by changing

import { DeviceEventEmitter, NativeModules } from 'react-native'

to

import { DeviceEventEmitter, NativeModules , Platform } from 'react-native'

and it fixed.

I hope this can help other fellas running into this problem.
BTW i'm using this library in a react native project with expo v35.0.

best regards

events problem

Hi, I'm using this library on react native with typescript template for playing stream videos. Everything actually work well except any events ! Check below code :

import VlcPlayer from "react-native-vlc-player";

<VlcPlayer
  style={{ height, width }}
  paused={false}
  autoplay={true}
  onVLCProgress={event => console.log("onVLCProgress --->", event)}
  onVLCEnded={event => console.log("onVLCEnded --->", event)}
  onVLCStopped={event => console.log("onVLCStopped --->", event)}
  onVLCPlaying={event => console.log("onVLCPlaying --->", event)}
  onVLCBuffering={event => console.log("onVLCBuffering --->", event)}
  onVLCPaused={event => console.log("onVLCPaused --->", event)}
  source={{
    uri: videoUri,
    autoplay: true,
    // initOptions: ["--codec=avcodec"],
  }}
/>

None of onVLCPaused, onVLCProgress, onVLCEnded and etc. doesn't fire any events in any situations ! can anyone helps me ?

How add MobileVLCKit to example project?

I add Podfile string
pod 'MobileVLCKit'
Next pod install --> react-native link
--> changed uri -->

source={{
uri: 'https://www.radiantmediaplayer.com/media/bbb-360p.mp4',
// autoplay: true,
// initOptions: ['--codec=avcodec'],
}}

--> react-native run-ios

Project iOS compiled in "Legacy mode", but not work.

Too High latency of 2 second in rtsp streaming

<VlcPlayer
      style={styles.video}
      paused={false}
      autoplay={true}
      source={{
        uri: uri,
        autoplay: true,
        initOptions: [
          'network_caching_value=100'
        ],
      }}  />

Even tried to reduce network caching value to 100ms, even then latency remains 2 second.

How to reduce latency in rtsp?

why rtsp adress can play in VLC Media Player on DeskTop (Windows) but counld not play in RN App?

PlayAdress: rtsp://117.159.206.247:33100/test
Does it work in you ?Hoping for your help

custom player style

how can I custom player style, I want to play at the current page, not open a new page and not full screen

Read This To Get This Working With React-Native 0.60.* !

To get this working with react-native 0.60.* you will need to make a few edits

First you will need to make sure your AndroidManifest.xml contains the following in the opening tag
xmlns:tools="http://schemas.android.com/tools"

and in the opening tag you will need this
tools:replace="android:allowBackup"

Once this is done you will need to open the following file
node_modules\react-native-vlc-player\android\vlc\src\main\AndroidManifest.xml

You will need to change the package name from
com.vlcplayer to com.ghondar.vlcplayer

Next you will need to open the following file
node_modules\react-native-vlc-player\android\vlc\src\main\java\com\ghondar\vlcplayer\PlayerActivity.java

You will need to edit line number 25 from
import com.vlcplayer.R; to import com.ghondar.vlcplayer.R;

i hope this has helped some people there is just one issue remaining and that is there is a small white bar below the video when playing

Plugin with id 'maven' not found

Plugin with id 'maven' not found

A problem occurred evaluating project ':react-native-vlc-player'.

How to link VLC player manually?

Could you please mention the steps of manual linking in vlc-player as I need to integrate the player into my project.

npm install and build error!

npm install and build error!

:react-native-vlc-player:compileReleaseJavaWithJavac
/Users/jacktwain/git_oschina/lianxin/lxclient/node_modules/react-native-vlc-player/android/vlc/src/main/java/com/ghondar/vlcplayer/PlayerActivity.java:26: error: package org.videolan.libvlc not found
import org.videolan.libvlc.IVLCVout;
                          ^
/Users/jacktwain/git_oschina/lianxin/lxclient/node_modules/react-native-vlc-player/android/vlc/src/main/java/com/ghondar/vlcplayer/PlayerActivity.java:27: error: package org.videolan.libvlc not found
import org.videolan.libvlc.LibVLC;
                          ^

Change tempo/bpm

Hi is there a way to change bpm on music file?

element type is invalid expected a string ( for built-in components ) or a class/function ( composite components ) but got : null

Thanks for taking the time to update this bud i have one issue i am using a stack navigator and sending my url via props but its giving me the error in the title

   render() {

	const { navigation } = this.props;
	const Stream = navigation.getParam('Stream', 'https://www.videvo.net/videvo_files/converted/2012_08/preview/AnalogStatic-H264%2075.mov84321.webm');
	
    return (
      <View style={styles.container}>
        <VlcPlayer
	    ref={this.vlcplayer}
	    style={{width: 300,height: 200,}}
	    paused={false}
	    autoplay={true}
	    source={{ uri: Stream, autoplay: true, initOptions: ['--codec=avcodec'], }}  />
      </View>
    );
  }
}

upgrade react

App Unresponsive after closing screen with VLCPlayer mounted

After closing the view that contains the VLCPlayer it just makes the App unresponsive for a long time or until a message tells the user to close or wait for the application.

nice !

hello

great project ! keep up the good work :)

2 questions:

• have something to do to play http streams ? seems playing only local files (perfectly)
• ios version planned ?

thanks !

How to detect if the video/source is not working?

Hi, I just successfully managed to display video stream from RTSP url.
Now, I need to give an alert to user when the source is not working. Can it be possible?

Rewind control support

Are there any plans to support rewind?

fps drops when streaming is 1080p

When I try to play an HD streaming throught VLC it doesn't seem smooth. This happens when I use HTTP. any idea how can I solve it?

General Question: Can this library work with Expo out of the box?

-- or --

Would I need to eject the app or start from scratch with a new non-Expo RN App?

Thanks

Invariant Violation: requireNativeComponent: "RCTVLCPlayer" was not found in the UIManager for EXPO

in EXPO getting this error Invariant Violation: requireNativeComponent: "RCTVLCPlayer" was not found in the UIManager. and don't know how to do manual linking in EXPO

version for ios does not have?

version for ios does not have?