(Android) Black Screen for a second between loading and video playback

[TheSolly]

There is an always around 2 seconds of black screen when moving from onLoad which stop my loading spinner component and the start of the video playback in my code below. I am using ExoPlayer.
Any idea what i am doing wrong, or how can i improve my code to get rid of the black screen?!

My Code:

render() {
    let loading = null;
    let waitingVideo = null;
    if (!this.state.waitingVideoURL) {
      loading = (
        <View>
          <Text style={styles.loading}>Loading...</Text>
          <ActivityIndicator size="large" color="#2C3942" />
        </View>
      );
    } else {
      waitingVideo = (
        <Video
          source={{
            uri: this.state.waitingVideoURL,
          }}
          resizeMode="cover"
          style={styles.backgroundVideo}
          repeat
          onLoad={this.stopLoading}
        />
      );
    }

    return (
      <View style={styles.container}>
        <StatusBar hidden />
        {waitingVideo}
        {loading}
      </View>
    );
  }
}

[cobarx]

I'm guessing you mean ExoPlayer, but wanted to make sure because Expo has their own video player.

Can you share a sample video? It may be an issue that's specific to certain videos.

[TheSolly]

Yes, i am using ExoPlayer, corrected main post, thanks for the head up.
Will prepare a sample Video and post it here, meanwhile nothing can be improved in my code?!

[cmmartin]

I am having the same issue on iOS. The video doesn't seem to matter. It happens with every video that I've tried. I am using version 3.1.0. This is what happens...

1. The poster shows
2. The video finishes loading
3. The poster is removed
4. The video plays

Between steps 3 and 4, there is a flash of background color instead of the poster seamlessly blending into the video. The flash happens before the onLoad prop is called, so there isn't much you can do from userland AFAIK