react-native-video / react-native-video Goto Github PK

If we want to display a kind of progress bar during playing of the video we need a way to "scrub" through the video and update the video's currentTime accordingly.

It warns about using these two:

Example:

Warning: Failed propType: Invariant Violation: Invalid props.style key backgroundColor supplied to Video.

However, it does in-fact set the background and border colors properly.

See http://www.w3schools.com/tags/av_prop_currenttime.asp
That would be sweet!

We are currently throwing away and re-creating the AVPlayer. It would be nicer if we just reused the same instance and exchanged the item if the source changes.

I'd appreciate an explanation, either here or in the README, of how to use the included Example. It looks like it includes a project file that references another RCTVideo project file which in turn references .h and .m files that don't exist.

Ideally, the example would somehow refer to the RCTVideo sources at the top of the repo so it could be used for testing/developing those files. I'm trying to figure it out and will advise if I come up with anything.

Hi, @brentvatne

I come across some problem when using the local video (mp4) file. It also occurs when running the example code in Examples/VideoPlayer. I'm definitely sure the local video file exists.
Here is the error message.

If I use the remote resources, it works well.
Thanks.

I'm new to react native so I'm probably just doing something wrong...

For some reason, when I'm done playing the video the Video (element?) stays but with no video.

Basically, after a given amount of time, I from the onProgress callback I call this.props.closeVideo(); in the child which calls closeVideo() in the parent and sets showReward to false then the screen goes white.

Here's my code.

Parent

handleTouchStart(event: Object) {
    this.setState({showReward: true});
}
closeVideo() {
    console.log("closeVideo()");
    this.setState({showReward: false});
}
render() {
    if(this.state.showReward) {
        return (
            <Reward closeVideo={() => this.closeVideo()} />
            );
    } else {
        return (
            <View
                style={styles.container}
                onTouchStart={(event) => this.handleTouchStart(event)}>
                <Tile state={this.state}/>
            </View>
        );
    }
}

Reward (child)

setTime(progress) {
    if(progress.currentTime > this.state.reinforcerLength) {
        this.props.closeVideo();
    }
}
render(){
    return (
        <Video source={{uri: "SampleVideo"}} // Can be a URL or a local file.
            resizeMode="cover"           // Fill the whole screen at aspect ratio.
            repeat={true}                // Repeat forever.
            onProgress={this.setTime.bind(this)}    // Callback every ~250ms with currentTime
            style={styles.backgroundVideo} />
    );
}

I suggest changing onProgress to onTimeupdate (or onTimeUpdate) so progress can be used for notifications of partial buffering updates. See here for an idea on how to implement that, by the way. Refer to my note in #8. Thanks.

On line 39 of Video.ios.js.

I've ran through all of the steps, not sure what the problem is...

Hi,

is there currently a possibility to restart the video / audio, once it has finished? I can't see anything about it in the example / docs.

Thanks :)
Philipp

Always returns 1, not the actual duration. Any idea what's going on here @johanneslumpe?

I'm using this component to play mp3 files, I'm streaming the music from one of my servers, everything is great so far. I would like to know if is possible to continue playing the music after the phone gets lock, or if the user leaves the app I would also like to continue playing the music, is this possible?

Regards

Hi,

I'm using this module to play a simple audio file at the moment (an .m4a file) and I get the following warning:

2015-06-24 08:11:14.529 Yoloci[15881:17768305] 08:11:14.529 WARNING: 139: The default input device's sample rate was changed.
2015-06-24 08:11:14.565 Yoloci[15881:17767376] 08:11:14.565 WARNING: 256: Audio device's sample rate changed. You may need to restart the simulator.

and at the same time, the used memory is increasing over time (and doesnt seem to stop increasing at all):

Please note that the file I'm playing is only roughly 1MB of size, so that shouldnt be an issue, should it?

Regards
Philipp

thanks for sharing this library.
but i faced some problem when i am going to run the project in the simulator.
it shows

I believe it has to do with the limitations of MediaPlayer rather than using AVPlayer.

Can you help out?

I'm getting errors within React's simulator:
undefined is not an object (evaluating 'NativeModules.VideoManager.ScaleAspectFill')

Video_render
Video.ios.js:79
...

I have added "background.mp4" to xcode, within a folder called "assets-library", and have added the mp4 to Copy Bundle Resources.

Here is the code:

'use strict'

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableHighlight
} = React;

var Video = require('react-native-video')
var FacebookLoginManager = require('NativeModules').FacebookLoginManager;


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  background: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
  },
  backgroundOverlay: {
    opacity: 0.5,
    backgroundColor: '#ffffff',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

var FacebookLogin = React.createClass({
  getInitialState() {
    return {
      result: 'HELLO!'
    }
  },

  componentDidMount() {
    var self = this;
  },

  login() {
    FacebookLoginManager.newSession((error, info) => {
      if (error) {
        this.setState({result: error});
      } else {
        this.setState({result: info});
      }
    });
  },

  render() {
    return (
      <View style={styles.background}>
        <Video source={{uri: "background"}}
               resizeMode="cover" repeat={true} key="video2" 
               style={styles.backgroundVideo} />
      <View style={styles.backgroundOverlay} />

      <View style={styles.container}>
        <TouchableHighlight onPress={this.login}>
          <Text style={styles.welcome}>
            Facebook Login
          </Text>

        </TouchableHighlight>
        <Text style={styles.instructions}>
          {this.state.result}
        </Text>
      </View>
      </View>
    )
  }
})



AppRegistry.registerComponent('FacebookLogin', () => FacebookLogin);

module.exports = FacebookLogin

Added this module to http://reactnativemodules.com as well. Keep up the good work.

due to breaking changes in https://github.com/facebook/react-native/releases/tag/v0.4.3

I get the following error while loading a page with

[tid:com.apple.main-thread][RCTVideoManager.m:35] Error setting property 'src' of RCTVideo with tag #67: RCTVideo does not have setter for src property

I have an issue trying to play a video that I recorded, the file is outside of the mainBundle directory and so the player can't of course find the file.
The issue is related to that code:

NSURL *url = (isNetwork || isAsset) ?
    [NSURL URLWithString:uri] :
    [[NSURL alloc] initFileURLWithPath:[[NSBundle mainBundle] pathForResource:uri ofType:type]];

A solution would be to override the isNetwork property, but unfortunately impossible on the js side, I think the variable is initialized by React.
@brentvatne do you have any idea ? We could maybe create a prop to force the use of URLWithString

Thanks,

This can be calculated using AVPlayerItem's loadedTimeRanges property and is a really useful information to have.

This is most obvious (and annoying) when shrinking the size of the video (take your demo code and say, change right: 0 -> right: 200 programmatically and you will see the right edge of the video cut off for a split seconds while it animates into the correct location.

I tried poking around in the ObjC Class for a bit, but not being a skilled native iOS dev, I didn't make any progress.

Let me know if that doesn't make sense or if I can provide more info. Thanks for a great library!

Setting the paused prop to true doesnt have the expected effect.
Instead the video starts playing whatsoever.

Locking the device while the video element is on-screen causes up to a 3-4 second delay when the phone attempts to wake, and causes the video component to turn black.

Affected example app: https://github.com/jhabdas/lumpen-radio/tree/v1.0.0-rc

To replicate follow the instructions for setting up the app. Start the app on an actual device, unplug the device from USB, turn the screen off with the app running and then unlock the device after 20 seconds.

When the screen does eventually come back to life (usually after a few home button presses) the video disappears and the video content area goes black.

It would be a nice feature to be able to stream live video with this component.

Currently if I try to play a live stream (e.g. from a Wowza streaming server referencing the stream's playlist.m3u8 file) it begins to play but then an error is thrown in XCode on line 142 in node_modules/react-native/React/Executors/RCTContextExecutor.m:

while (kCFRunLoopRunStopped != CFRunLoopRunInMode(kCFRunLoopDefaultMode, [[NSDate distantFuture] timeIntervalSinceReferenceDate], NO)) {
      RCTAssert(NO, @"not reached assertion"); // runloop spun. that's bad.
    }

Right now, this component only works with local videos. AVPlayer works either way; you just have to change how you create the NSURL. Something like this:

- (void)setSrc:(NSString *)source
{
  // ...
  _videoURL = [[NSURL alloc] initWithString:source];
  // ...

I think you'd want to do parse the incoming source string and decide whether to look in the mainBundle. I can try to take a stab at it myself if I have some time later, unless you have a preference as to how this would work.

thanks 🍺

We are having issues removing a Video component. By removing I mean, It being rendered is dependent on a state value. So, when the value is false the Video is not rendered.

If the video was previously rendered, and we remove it (due to a state change), it crashes with the following error:

*** Terminating app due to uncaught exception 'NSRangeException', reason: 'Cannot remove an observer <RCTVideo 0x15fe92a00> for the key path "status" from <AVPlayerItem 0x17001ea00> because it is not registered as an observer.'

My colleagues and I did some digging this is the line that causes the crash: https://github.com/brentvatne/react-native-video/blob/master/RCTVideo.m#L324

When I setup a breakpoint, I notice something odd: removeFromSuperview is getting called twice. Once when the layout is re-rendered when I remove the Video component (it goes through fine here), and then is called again when I pop the current route off of the navigator, and this is when it crashes.

i know this is an odd thing, so let me know if that doesn't make sense.

I added a log:

- (UIView *)view
{
  NSLog(@"RCTVideo init RCTVideo init");
  return [[RCTVideo alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
}

result:

2015-05-06 02:50:18.218 gouhuo-native[67470:4294635] RCTVideo init RCTVideo init
2015-05-06 02:50:18.218 gouhuo-native[67470:4294635] RCTVideo init RCTVideo init

This is probably what is the problem? thanks

After upgrading to 0.7.0-rc.2, I get the following error:

RCTVideoManager is returning nil for it's methodQueue, which is not permitted. You must either return a pre-initialized queue, or @synthesize the methodQueue to let the bridge create a queue for you.

We need some

Currently we control the whole video using props. I think it might be useful to only control basic things like source, autoplay etc via props. For everything else we should start creating a proper api, which can then be triggered like this inside a component:

someMethod() {
  this.refs.video.someApiMethod();
}

I propose that we implement the following as api:

• play
• pause
• togglePlay(?)
• setRate
• setVolume
• setMuted / toggleMuted
• setRepeat
• setResizeMode
• seek (already implemented in the feature/seeking branch)

Thoughts on this?

Since we are leveraging AVPlayer under the hood, playing audio just works fine too. Same rules apply. So It might be nice to rename the compoent to AudioVideo or something or just Media so people can easily understand that they can also play mp3s with this.

Hi,
Sorry if it's been covered already, but I can't find a license anywhere in the repository. Is there one?

I've set pause to true, but once a video loads, it ignores the setting and plays anyway. Toggling pause and play works fine once the video has started, but I want a video to load then remain paused at the first frame if pause is set to true.

Perhaps you can just use a remotely hosted video, now URLs are supported? Or put a much smaller one in there.

AVPlayer automatically pauses itself if a playing media reaches an unbuffered section, but doesn't continue playing after more data is buffered so it has to be manually asked for a start after such a case.

Just started to get this when trying to install the latest version of the module

npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "react-native-video" "--save"
npm ERR! node v0.12.0
npm ERR! npm  v2.5.1
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package react-native does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-native@>= 0.4.3
npm ERR! peerinvalid Peer [email protected] wants react-native@^0.4.3

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/elietoubiana/mobile/AlfredApp/npm-debug.log

This is the content of my package.json

{
  "name": "myApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh"
  },
  "dependencies": {
    "react-native": "^0.5.0"
  }
}

Thanks for all the awesome libraries!

I think there is a bug here: https://github.com/brentvatne/react-native-video/blob/master/RCTVideo.m#L133

I'm not sure what the fix is, but it seems that for example, the resizeMode property never gets set on the new instance created. I guess all the properties should be set, but I wasn't sure where this was occurring to be able to do a pull request.

I believe this to be yet another threading issue. I didn't have this issue with the remote videos in my app, but when I added video pre-loading to it using a hacky way (just move video component to background, assign the next video to it, and pause it until it is needed) I realized that videos kept playing even when paused property was correctly being set.

I tried to ref the video component in order to call seek(), but the object never becomes available on the this.refs object (is always undefined).

I also tried the ref callback but is never called.

Could you provide an example using seek() through a ref on the Video component ?

Hi,

onEnd seems not to get called when playing from an URL:

                        <Video source={{uri: ITUNES_JSON.previewUrl}} // Can be a URL or a local file.
                           rate={1.0}                   // 0 is paused, 1 is normal.
                           volume={1.0}                 // 0 is muted, 1 is normal.
                           muted={false}                // Mutes the audio entirely.
                           paused={!this.state.itunesPlaying}               // Pauses playback entirely.
                           resizeMode="cover"           // Fill the whole screen at aspect ratio.
                           repeat={false}                // Repeat forever.
                           onEnd={() => {console.log('test');}}/>

with the following URL:

  "previewUrl":"http://a1471.phobos.apple.com/us/r2000/004/Music/ec/88/d0/mzm.fqrwrunh.aac.p.m4a",

Any idea?

If you remove the video from a view, it keeps playing in the background. You can hear the audio playing, and it continues to occupy memory. It's also evident if you do a JavaScript reload within the app while you're debugging.

I can implement a quick and dirty fix by adding this to RCTVideo.m:

- (void)removeFromSuperview
{
    [super removeFromSuperview];
    [_player pause];
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

That stops the video from playing, but I don't believe it's really deleted the object, since dealloc doesn't run and the memory graph continues to climb. So I'm sure there's more work to be done here. I'd offer to make a pull request, but I don't know Objective-C well enough to do it myself.

Having it as a dependency could cause issues, if the consumer has a different version than the required one installed. In that case react-native-video will install a local version for react-native as well - undesireable. Since this is a "plugin" for react-native we should mark it as peer dependency with an according semver range I think.

Thoughts?

thanks, it's big help for us!

This simple fix works:

jsierles@0446275

Hi Brent.

Videos don't work, if the device your are running the iOS simulator on doesn't have a mic (e.g. Mac mini)
When I plugged in a Webcam (and recompiled) it worked. There still is a warning (137: Error '!dat' trying to set the (null) audio devices' sample rate), but no errors.

I'm not sure if you can do anything about this, since it's probably an error within a library, but I thought I raise it here. Other projects seem to have the same issues (http://stackoverflow.com/questions/17318706/avaudioplayer-error-using-ios-simulator)

Thanks for the great work.

Cheers
Georg

The npm package doesn't seem to include this file, and I'm having trouble building it. Can you provide the file or instructions on how to build it?

Thanks

We should consider adding an autoplay property so the user can control whether the video should play as soon as it becomes ready or wait for user interaction/whatever.