How to show video player just like facebook (with play/pause, duration, bar with touchable skipping video)

[prashen]

It's working and I can play and pause video. But how to showing progress bar. Showing duration and a play/pause button and user can tap on specific progress bar area. Just like facebook video player shows. I am using windows os and making app for android. And please tell me, Is it possible in react native to show a video just like facebook did?

giving example of react native app https://play.google.com/store/apps/details?id=com.discovery.DiscoveryVR&hl=en Just like discoveryVr app using it's video player. Can we show video play/pause button and use progress bar with drag feature with you plugin.

[ronak301]

see example

[pedramsaleh]

The example doesn't seem to have seeking controls. It just allows play/pause, rate, shows duration and stuff like that. Is there a way to seek in the video?

[prashen]

@pedramsaleh I am using this: https://github.com/cornedor/react-native-video-player and able to get like this https://raw.githubusercontent.com/cornedor/react-native-video-player/master/demo.gif as they are showing. Seeking is not happening and sometimes seeker bar is also not showing correct. The main problem I am not getting the thumbnail and play button position as it was before playing when video ends. onEnd callback function is also not working. I have posted it also https://github.com/cornedor/react-native-video-player/issues/4

[pedramsaleh]

@prashen Are you using the seek() method to implement seeking? It looks like you're just using it to go back to the beginning at the end of the video.

[prashen]

I am using:

<VideoPlayer thumbnail={{ uri: this.state.thumbnailUrl }} video={{ uri: this.state.videoUrl }} videoWidth={this.state.video.width} videoHeight={this.state.video.height} duration={this.state.video.duration} />

I am using their example folder and run it. If i need to use seek method then how can you tell me? And they are using seek in the node_module/react-native-video-player/index.js inside onEnd function:

onEnd() { this.player.seek(0); if (!this.props.loop) { this.setState({ isPlaying: false, }); } }

[pedramsaleh]

I haven't had a chance to implement it myself yet, but it seems fairly straightforward. According to the readme, use it like this:

seek(seconds)

and it will go to the number of seconds the parameter indicates. So this.player.seek(10) will go to 10 seconds in.

[SHRoberts91]

Hey @prashen, I'm not sure about those libraries, but to get seek working with react-native-video you have to create a ref on the <Video> component and then you can access the seek function. for example: <Video ref={videoRef => this.videoRef=videoRef onEnd={() => {this.videoRef.seek(0); if (!this.props.loop) {this.setState({isPlaying: false});}} **any other props you need** />

[prashen]

@SHRoberts91 Yes inside this plugin react-native-video onEnd method working but not properly. I mean to say, I want to do something after video ends but here it is firing each time when video get buffering. I have used a function inside onEnd={()=>{alert('fired')}} like this. That's why I moved to react-native-video-player. What I have done yet using react-native-video-player: 1- play/pause icon done 2- seek bar showing (it's not functional, you can't move seek.. it's ok for me. :) ) 3- onEnd method not working (how to implement?)

If anyone help it will be great :). Here is the exact issue: https://github.com/cornedor/react-native-video-player/issues/4.

I am posting these issues inside react-native-video because these two plugins are complementing each other and helpful.

[pedramsaleh]

This is what I did to get seeking working. The progress indicator/seek control is below. You can get the style info from the component's example code.

<View style={styles.controls}>
        <TouchableWithoutFeedback onPress={(evt) => this._handleSeek(evt)} >
          <View style={styles.progress}>
            <View style={[styles.innerProgressCompleted, {flex: flexCompleted}]} />
            <View style={[styles.innerProgressRemaining, {flex: flexRemaining}]} />
          </View>
        </TouchableWithoutFeedback>
</View>

When pressing, it does the following. The code assumes a full screen player.

_handleSeek(event) {
  const screenWidth = Dimensions.get('window').width;
  const percent = event.nativeEvent.pageX / screenWidth;
  this.refs.videoPlayer.seek(Math.floor(this.state.duration * percent)) 
}

And you need to add a ref on the video player component

<Video
    ref={"videoPlayer"}
    {other props}
 />

[vvavepacket]

@pedramsaleh any idea if seeking will work on remote video url?

[pedramsaleh]

Not sure. I've only used this for playing local content so I didn't look into how it works for streaming.

[vvavepacket]

@pedramsaleh i confirm the seek works also in stream. :) awesome thanks for your code... anyway, do you have any idea to hide that progress bar when video is playing,, and make it only visible when screen is touch?

[ghost]

@vvavepacket you can use https://github.com/itsnubix/react-native-video-controls

[Msspl-PrashenjeetRoy]

@sabaparsa Nice plugin, but I think it does not support more than rn 0.45

[AliZeynalov]

@prashen man did you find a way to create progress bar? I'm living the same issue. I need progress bar. I tried react-native-video-controls. But it's progress bar is not stable on devices.

[Rupali97]

@AliZeynalov did you find any solution.. facing the issue with progress bar..