React-native-video: How to replay a video by clicking on an external button?

[afilp]

I use seek(0) to replay a video that played once and finished, when clicking on a button.

But seek(0) just sends the video to start and does not play it. This is OK, but where is a method called play() to make it start playing again?

Note that I have repeat={false}.

[selsamman]

This is an unfortunate limitation. I have heard it suggested that you can toggle pause but this is really hacky trying to make sure the component renders. The other thing you can do is to use key prop with a sequence number to force the component to reload. Another thought is to use repeat={true} and handle the onEnd event to pause the video and then toggle your pause state with the play button. None of these are pretty.

[djw27]

Something similar to the following works for us:

replayVideo = () => {
    this._video && this._video.seek(0);
    this.setState({ videoPaused: false });
}

...

render() {
    return (
        <Video
            ref={component => (this._video = component)}
            paused={videoPaused}
            ... 
        />
    );
}

[afilp]

@selsamman @djw27 Thanks! The combined paused and onEnd trick did work. Still a trick though, took time to research this, it would be nice if this could be implemented as a 'replay' method.

Note that I did not need to use repeat, just 'paused' the video at the very end through a setState invocation. Not sure why it works since it does not repeat to have the need for a "pause", but it works for our use case of "replaying on button press".

paused={this.state.isVideoPaused} // This is ``falsy`` initially repeat={false} onEnd={() => this.setState({isVideoPaused: true})}

And then, as you suggested, this:

playVideo() { this.refVideoPlayer && this.refVideoPlayer.seek(0); this.setState({isVideoPaused: false}); }

Thanks again.