cornedor / react-native-video-player

A video player for React Native with controls

Why do you use this library?

I'd like to learn more about why people use this library over others. If you have the time, please leave a reaction at #166

React Native Video Player

A React Native video player with a few controls. This player uses react-native-video for the video playback.

Looking for maintainers! This project is currently no longer maintained. Please respond to issue #157 to become the new maintainer.

Installation

yarn add react-native-video-player react-native-video react-native-vector-icons

or

npm install --save react-native-video-player react-native-video react-native-vector-icons

Then, for React Native >= 0.60:

cd ios
pod install

Add the following at the beginning of ./android/app/build.gradle on Android (required for react-native-vector-icons to work):

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Add the following in your Info.plist file on iOS (required for react-native-vector-icons to work):

<key>UIAppFonts</key>
<array>
	<string>MaterialIcons.ttf</string>
</array>

For React Native < 0.60

react-native link react-native-video
react-native link react-native-vector-icons

Important Note

To avoid Build Error "Could not find com.yqritc:android-scalablevideoview:1.0.4." Add jcenter() to your build.gradle file present at the android folder (add it under allprojects). after the adding the changes, code would look like

For more info please refer to LINK

allprojects {
    repositories {
        mavenCentral()
        mavenLocal()
        jcenter()
  }
}

Example

<VideoPlayer
    video={{ uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
    videoWidth={1600}
    videoHeight={900}
    thumbnail={{ uri: 'https://i.picsum.photos/id/866/1600/900.jpg' }}
/>

Props

Prop	Description
video	The video source to pass to react-native-video.
thumbnail	An Image source to use as thumbnail before the video gets loaded.
endThumbnail	An Image source to use as thumbnail after the video has ended.
videoWidth	Width of the video to calculate the player size.
videoHeight	Height of the video to calculate the player size.
duration	Duration can not always be figured out (e.g. when using hls), this can be used as fallback.
showDuration	Show duration in seek bar.
autoplay	Start the video automatically.
defaultMuted	Start the video muted, but allow toggling.
muted	Start the video muted and hide the mute toggle button.
controlsTimeout	Timeout when to hide the controls.
disableControlsAutoHide	Disable auto hiding the controls.
disableFullscreen	Disable the fullscreen button.
loop	Loop the video after playback is done.
resizeMode	The video's resizeMode. defaults to contain and is passed to react-native-video.
hideControlsOnStart	Hides the controls on start video.
endWithThumbnail	Returns to the thumbnail after the video ends. If an endThumbnail image is not specified then the image specified in thumbnail is shown.
disableSeek	Disable video seeking.
pauseOnPress	Automatically pause/play when pressing the video player anywhere.
fullScreenOnLongPress	Automatically show video on fullscreen when doing a long press.
onStart	Callback for when the start button is pressed.
onPlayPress	Callback for when the play button is pressed.
onHideControls	Callback for when the controls are being hide.
onShowControls	Callback for when the controls are being shown.
customStyles	The player can be customized in this object, see customStyles for the options.

All other props are passed to the react-native-video component.

customStyles

• wrapper
• video
• controls
• playControl
• controlButton
• controlIcon
• playIcon
• seekBar
• seekBarFullWidth
• seekBarProgress
• seekBarKnob
• seekBarBackground
• thumbnail
• playButton
• playArrow
• videoWrapper

Methods

Method	Props	Description
seek	time: float	Seek the player to the given time.
stop		Stop the playback and reset back to 0:00.
pause		Pause the playback.
resume		Resume the playback.

Future features

• Make seek bar seekable.
• Make player customizable.
• Add volume control
• Add fullscreen button
  • Add fullscreen button for Android (See PR #38 if you need fullscreen in Android)
• Add loader
• Add video duration/play time

react-native-video-player's Issues

YouTube support

Hello,
Great project! I'm curious if it can support YouTube? If not, I can start working on it.

Getting Black screen

Hi Team,

I am having a problem with video playback. There is no video playing on the app just getting black screen.?
screenshot:

After video completed it showing nothing only black screen.

I want that after watching video, it should back to it's thumbnail state. like this:
https://cloud.githubusercontent.com/assets/5449548/19279982/607c17f6-9001-11e6-9164-2242210e941c.png

but it's showing like this:
After completing video see screenshot:
https://cloud.githubusercontent.com/assets/5449548/19278867/a0899fa8-8ffc-11e6-9a3a-eb5c02d4ac5a.png

Please suggest how to fix this.

New graphics for the player

@cornedor: I would suggest a new graphics for the player, see the picture below.
With the ability to customize the color of the ball and time seek.

Calling setState on an unmounted component

Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

Text Overlay on Thumbnail

Is there any way to do a text overlay on the thumbnail? I didn't see a reference to
{this.props.children}

However in my testing - the text did not seem to display.

Thank you for the help. This is a great library.

Update react-native-vector-icons to 3.0.0

All in the title.
Thanks for your work.

seekable seekbar

Hi!

You have a "Make seek bar seekable" task in the readme. Any plans when this will be done? Or did you already implement this, and i'm missing something?

Thanks for the great work so far!

this is a bug?

在 reatc-native 的该版本下安装,发生如下:
The installation under this version of reatc-native occurs as follows:

Android 4.4

hello, android 4.4 (x86 with google api's) not working, no sound and no video :

Callback when play pause

Is there a way to do some action (hide another view) when the play button is pressed? Something like onPlay and onPause would be great.

Or this issue is more in the react-native-video side?

thanks.

Thank you.

This Just Works ™️ - Thank you. ❤️

How to stop/pause video programmatically

How can I programmatically pause/stop video before navigating to next screen?

video won't play until player.seek is called

I'm using version 0.6.1 on Android, and am using a video from the filesystem. I've noticed that after pressing the play button about a second or two passes and then the onLoad event fires, but the video won't play. The controls show a pause button which indicates the video should be playing. Pressing pause and play again has no effect. However, if I drag the seekbar then the video will begin to play. In order to work around the issue, I need to call player.seek(0) in the onLoad callback to get the video to start playing.

      <VideoPlayer
        ref={(video) => { this.video = video; }}
        video={{ uri: `file://${this.props.location}` }}
        videoWidth={width}
        videoHeight={height}
        customStyles={videoStyles}
        onLoad={() => {
          this.video.player.seek(0);
        }}
      />

I'm not sure if the issue is with this library or with react-native-video itself.

RN 0.39 Do not seek to start after playing

Hi,

I m on RN 0.39, after playing video or audio, the player do not seek to 0 and i cannot replay.
Someone know how can we do it ?
Cordialy !!

Hard to show control bar

First thanks to this awesome plugin, you done a great job. But I facing a problem that quite hard to show the control bar when tapping the video player. I have to tap very quick in few time only show the control bar. Is there any option can make it easily to tap only one time in video player to display the control bar ?

video not adjusting to player size

This is my VideoPlayer code:-

<VideoPlayer
          thumbnail={{uri: this.props.data.videoUrl.split('//')[1] }}
          video={{uri: this.props.data.videoUrl.split('//')[1] }}
          duration={10}
          videoWidth={Dimensions.get('window').width}
          videoHeight={200}
          style={styles.backgroundVideo}
        />

Please help?

Android: crash due to backgroundColor

On my Android phone (7.1.1) I get the a crash Error while updating property 'backgroundColor' of a View managed by: RCTVideo. This doesn't happen on Genymotion with Android 5.0.0.

The problem is resolved if you remove backgroundColor from styles.video.

How to show activity indicator when video is buffering?

I have to show an activity indicator when video is buffering.

Prop to disable/remove full screen button

This is a feature request - it would be nice to be able to prevent the full-screen video option.

Add fullscreen button in Android

The full-screen option is not showing on Andriod not sure why. I'm using the lastest version

"react-native-video": "^2.0.0",
"react-native-video-controls": "^1.3.0",
"react-native-video-player": "^0.8.2", 

Here is my code

<VideoPlayer
   endWithThumbnail
   thumbnail={{uri: selectedPhoto.url.thumbnail}}
   video={{uri: selectedPhoto.url.compressedFile}}
   disableFullscreen={false}
/>

Video Play in Android version 7.0/24

In android version 7.0 and api version 24, when we play a video then it will showing below error.

I found a solution that we should overlride the video-player mode_module package video background color. Now I want to know that when we trying to override the video style like below:

customStyles={{
    video : {},
 }}

but its cannot override the style, still getting above error. How could i solve.

In node_module their is condition for 25 but no condition for 24. Below from node_module/react-native-video-player package::

  video: Platform.Version === 25 ? {} : {
    backgroundColor: 'black',
  },

Show the time

@cornedor: Can you show the video time?

Support for subtitles

Add support for subtitles that are attached to the file or also subtitles from different uri.

Can not set videoWidth and videoHeight.

Hi, I use this plugin in my Android app. this is my code:

const {height, width} = Dimensions.get('window');
<VideoPlayer
   source={...}
   videoWidth={width}
   videoHeight={height}
/>

but the result is the video didn't fill my screen.

Is there a way to use onLoad property from react-native-video?

Hello, considering that the plugin uses react-native-video, is there a way to use the property onLoad to retrieve the video information on load? eg:

{"canStepForward":true,"canStepBackward":true,"canPlayReverse":true,"canPlaySlowForward":true,"canPlayFastForward":true,"naturalSize":{"orientation":"portrait","height":1920,"width":1080},"canPlaySlowReverse":true,"currentTime":0,"duration":2.14}

I need to get the natural video size and orientation. Or does this plugin provide a different method to achieve this? thanks.

Add the ability to stop video playback

It should not rely on `react-native-vector-icons`

using pictures, it will be lighter

Error while updating property 'backgroundColor' of a view managed by: RCTVideo

Environment:
react-native: 0.44.0
node 7.9.0
"react-native-video-player": "^0.8.1",

Target Platform:
Android Emulator ( Nougat )

Development Operating System:
Ubuntu

Steps to Reproduce:

1. react-native run-android
2. Click on the play icon in the video player.

Expected Behavior
Video should play on the click.

Extra info
Android Emulator ( MarsheMallow ) - Working properly

Loop not working

Hi, I finally found a library in which I have autoplay, loop AND where I can hide controls, so thanks first of all. Unfortunately for me loop isn't working. Here is my code:
All help appreciated

<VideoPlayer
            video={{ uri: `https://awesome.com/video/`${id}.webm` }}
            videoWidth={metrics.screenWidth}
            videoHeight={metrics.screenWidth * 1.2}
            loop
            autoplay
            hideControlsOnStart
            muted
            customStyles={{seekBar:{opacity: 0}, controls: {opacity: 0}}}
          />

package.json

    "react-native-vector-icons": "4.0.0",
    "react-native-video": "^1.0.0",
    "react-native-video-player": "^0.7.0",

Feature request - bind events to player operations.

Hello, It would be great if we can bind callbacks on events such as onStart, onEnd, onSeek, onPause, onResume and it should have arg returning currentTime for the event.

Refer this JQuery player: https://github.com/Selz/plyr

Getting Issue while installing example folder

I am getting error while installing your example folder it installed but when I am playing video on pressing video icon it's showing error. Please tell me, Is there something missing in example folder? Or i have to install a new RN project and implement step by step? Actually I wanna first see the example file then will implement to my existing project. I was searching a solution TheWidlarzGroup/react-native-video#353 and I got your github repo. It seems that your plugin has what I wanted to implement in my project.

https://cloud.githubusercontent.com/assets/5449548/19274796/fd2bb56a-8fee-11e6-93c3-db67ef458cec.png

Not able to reproduce videos without extension

Hi! I'm not able to reproduce videos without extension downloaded from AWS S3.
They work correctly on Android, but do not work on iOS.
Can I indicate the content-type of something like that?

I was thinking to download the file, change the name, add the extension and reproduce it with the react-native-video-player. But it sounds complicated.

Any Idea?

I'm using:
"react-native": "0.39.2",
"react-native-video": "^0.9.0",
"react-native-video-player": "^0.5.1",

Best,
Carlos

Fullscreen mode : player turns black, no video plays, only audio.

In full screen mode video does not show and on exiting the full screen mode, video does not play again. (ios)

Android 4.2.2 not supported

Missing override for customStyles.seekBarBackground

The override for the customStyles.seekBarBackground is missing in renderSeekBar().

Solution:

... //
<View style={[
  styles.seekBarBackground,
  { flexGrow: 1 - this.state.progress }, 
  customStyles.seekBarBackground  // <-- This is missing
]} />
...

Android 5.1 white screen

Hello, have a white screen when press start , sound is playing , but no video,

before press start

after

on iOS is good

View.PropTypes has been deprecated

New version of ReactNative (0.43+) warns of upcoming deprecation.

Warning: View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead.

Bug with ViewPropTypes.style

Hello there! Thank you for the great work on this library! I've just updated to 0.8.3 and react-native-video 2.0.0 and I am getting the following error. Currently on React Native 0.42.3.

Another error I've got (relative to this one) pointed to this line

react-native-video-player/index.js

Line 508 in f4a47de

style: ViewPropTypes.style,

.

Let me know if you need further information!

undefined is not an object RCTVideo.Constants

error after installation on Windows -> Android

undefined is not an object (evaluating '_reactNative.NativeModules.UIManager.RCTVideo.Constants')

Did anyone come across this issue before?

Possible duplicate wrapper

Since render() already got a wrapper view...

render() {
    return (
      <View onLayout={this.onLayout} style={this.props.customStyles.wrapper}>
        {this.renderContent()}
      </View>
    );
  } 

Maybe that View tag that wraps everything in renderVideo() is unnecessary due it's not allows any style customization.

renderVideo() {
    const {
      video,
      style,
      resizeMode,
      customStyles,
      ...props
    } = this.props;
    return (
      <View> <----------------- is this View really necessary?
        <Video
          {...props}
          style={[
            styles.video,
            this.getSizeStyles(),
            style,
            customStyles.video,
          ]}
          ref={p => { this.player = p; }}
          muted={this.props.muted || this.state.isMuted}
          paused={!this.state.isPlaying}
          onProgress={this.onProgress}
          onEnd={this.onEnd}
          onLoad={this.onLoad}
          source={video}
          resizeMode={resizeMode}
        />
        <View
          style={[
            this.getSizeStyles(),
            { marginTop: -this.getSizeStyles().height },
          ]}
        >
          <TouchableOpacity style={styles.overlayButton} onPress={this.showControls} />
        </View>
        {((!this.state.isPlaying) || this.state.isControlsVisible)
          ? this.renderControls() : this.renderSeekBar(true)}
      </View>
    );
  }

My use case of style customization is to add flex: 1 to this View.
Let me know if a PR is welcomed.

Can't play .mp4 on android

using an external uri, i cannot play mp4 videos on Android. On ios they work fine. On android when i use .webm they also work fine.

I have not here, not on react-native-video encountered anyone with this same issue. Can anyone please confirm that for example this test video works on android?

http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4

 <VideoPlayer
            video={{ uri: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'}}
            videoWidth={metrics.screenWidth}
            videoHeight={metrics.screenWidth * 1.2}
            loop={true}
            repeat
            autoplay
            hideControlsOnStart
            muted
            customStyles={{seekBar:{opacity: 0}, controls: {opacity: 0}}}
          />

YellowBox.js:76 Using <Image> with children is deprecated and will be an error in the near future. Please reconsider the layout or use <ImageBackground>

Is anyone else getting the following warning

YellowBox.js:76 Using with children is deprecated and will be an error in the near future. Please reconsider the layout or use instead

Android not working on device

It is working perfect on iOS and Android 7.0+ simulator.

But on the galaxy s8, it shows the thumbnail and controls. Then when pressing play, it is blank and does not play the video.

This is the device log:
05-24 16:31:50.313 13493-13493/? E/Zygote: v2 05-24 16:31:50.314 13493-13493/? E/Zygote: accessInfo : 0 05-24 16:33:47.939 13493-13770/com.thirsty E/OpenGLRenderer: resultIndex is -1, the polygon must be invalid! 05-24 16:33:47.978 13493-13770/com.thirsty E/OpenGLRenderer: resultIndex is -1, the polygon must be invalid! 05-24 16:33:48.617 13493-13770/com.thirsty E/OpenGLRenderer: resultIndex is -1, the polygon must be invalid! 05-24 16:33:57.028 13493-13493/com.thirsty E/MediaPlayer-JNI: JNIMediaPlayerFactory: bIsQCMediaPlayerPresent 0 05-24 16:33:57.028 13493-13493/com.thirsty E/MediaPlayer-JNI: JNIMediaPlayerFactory: bIsQCMediaPlayerPresent 0 05-24 16:33:57.928 13493-16121/com.thirsty E/MediaPlayer: error (1, -2147483648) 05-24 16:33:58.425 13493-13506/com.thirsty E/MediaPlayer: error (1, -2147483648)

Also doesn't work in Android 6.0 simulator.

Android 6.0 Run successfully, show white screen, player control is not displayed

Run successfully, show white screen, player controls do not show.
IPhone, running without problems

Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[NSURL initFileURLWithPath:]: nil string parameter'

I am using iOS device, and when I play the video, I got this error.

Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[NSURL initFileURLWithPath:]: nil string parameter'

The video url is a rtsp live stream. The iOS device and the camera stream (rtsp) are in same local network.

What does this error imply?

iOS seek bar not working: react-native 0.39.2

iOS seek bar not working in react-native version 0.39.2.

*Seekbar progress not working
*When touch on seekbar the video play from the start.

Mac OS
iPhone 6, 5s
OS iOS 10

This working smoothly on Android.

Video Player Object is not stopped after switching to view

After I switch from the view that has the video player to another view. The video player doesn't stop or is not killed. I'm not sure that issue is a bug, but I would like to stop and remove the video player object.

controlsTimeout not working well on Android

I have controlsTimeout set to 1000 since all my videos will be less than that. I just want to keep the controls visible the entire video.

It's working fine on iOS
On Android, if I set the timeout higher than the video length, the controls don't show up at all.

Red bar of the video not coming when duration is passed?

Video red navigation bar not coming when duration is passed to the Video component

  <VideoPlayer
          thumbnail={{uri: this.props.data.videoUrl.split('//')[1] }}
          video={{uri: this.props.data.videoUrl.split('//')[1] }}
          duration={this.props.data.duration}
          style={styles.backgroundVideo}
          resizeMode={"cover"}
        />

This is my code and the duration is coming as 5125 in miliseconds. Please help