cornedor/react-native-video-player

A video player for React Native with controls

react-native-video-player's Issues

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}
/>

Thank you.

This Just Works ™️ - Thank you. ❤️

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}}}
          />

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?

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

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.

Show the time

@cornedor: Can you show the video time?

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",

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

using pictures, it will be lighter

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?

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 !!

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)

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.

YouTube support

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

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.

Update react-native-vector-icons to 3.0.0

All in the title.
Thanks for your work.

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

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

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

Add the ability to stop video playback

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!

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.

this is a bug?

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

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

Support for subtitles

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

How to show activity indicator when video is buffering?

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

Android 4.4

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

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.

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.

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?

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

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',
  },

How to stop/pause video programmatically

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

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:

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!

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

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
]} />
...

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

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.

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.

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.

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.

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

Android 4.2.2 not supported

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.

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.

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.

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.

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.