react-native-video takes too long to start playback

Question

In upgrading my app to react-native 0.59, I also upgraded react-native-video to it's latest version 4.4.1. What is currently happening is when trying to play videos with this library, it takes a while for the video to be available for playback. The size of the videos doesn't seem to matter. The videos are stored on S3, in my test environment the videos are linked by Cloudfront, in my local environment the videos are linked by the S3 location, but the behavior exhibited is the same for both environments.

This only happens for Android, iOS playback availability is ready in under 1s for the same videos.

I have tried rolling back react-native-video to a previous compatible version, the problem persists.

Different devices have different wait times for playback availability.

I wasn't able to used SDK 27 due to using a version of Firebase requiring SDK 28.

There is an IOException being raised when the component has been initialized to get the S3 resource, but the library does eventually get the video.

I don't know the exact cause of the problem, whether or not the library is downloading the video before playing, or if there needs to be a header included in the request.

Here is the debug output when trying to play a video:

I/MediaPlayer: constructor
W/MediaPlayer: setScreenOnWhilePlaying(true) is ineffective without a SurfaceHolder
V/MediaPlayer: resetDrmState:  mDrmInfo=null mDrmProvisioningThread=null mPrepareDrmInProgress=false mActiveDrmScheme=false
    cleanDrmObj: mDrmObj=null mDrmSessionId=null
V/MediaPlayer: resetDrmState:  mDrmInfo=null mDrmProvisioningThread=null mPrepareDrmInProgress=false mActiveDrmScheme=false
    cleanDrmObj: mDrmObj=null mDrmSessionId=null
I/MediaPlayer: setDataSource:<S3-url>/video.mp4
W/MediaPlayer: Couldn't open <S3-url>/video.mp4: java.io.FileNotFoundException: No content provider: <S3-url>/video.mp4
I/MediaPlayer: setDataSource:<S3-url>/video.mp4
V/MediaHTTPService: MediaHTTPService(android.media.MediaHTTPService@cefd526): Cookies: null
V/MediaHTTPService: makeHTTPConnection: CookieManager created: java.net.CookieManager@6738567
    makeHTTPConnection(android.media.MediaHTTPService@cefd526): cookieHandler: java.net.CookieManager@6738567 Cookies: null
I/DpmTcmClient: RegisterTcmMonitor from: com.android.okhttp.TcmIdleTimerMonitor
V/MediaPlayer: resetDrmState:  mDrmInfo=null mDrmProvisioningThread=null mPrepareDrmInProgress=false mActiveDrmScheme=false
    cleanDrmObj: mDrmObj=null mDrmSessionId=null
V/MediaPlayer: resetDrmState:  mDrmInfo=null mDrmProvisioningThread=null mPrepareDrmInProgress=false mActiveDrmScheme=false
    cleanDrmObj: mDrmObj=null mDrmSessionId=null
I/MediaPlayer: setDataSource:<S3-url>/video.mp4
W/MediaPlayer: Couldn't open <S3-url>/video.mp4: java.io.FileNotFoundException: No content provider: <S3-url>/video.mp4
I/MediaPlayer: setDataSource:<S3-url>/video.mp4
V/MediaHTTPService: MediaHTTPService(android.media.MediaHTTPService@f3e96c4): Cookies: null
V/MediaHTTPService: makeHTTPConnection: CookieHandler (java.net.CookieManager@6738567) exists.
    makeHTTPConnection(android.media.MediaHTTPService@f3e96c4): cookieHandler: java.net.CookieManager@6738567 Cookies: null
W/MediaPlayer: setScreenOnWhilePlaying(true) is ineffective for Surface
W/System: A resource failed to call release. 
I/MediaPlayer: start
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
E/Config:Grabber:GameModeImComponents: Exception:Value fcf76744443e3b9b807f2f2b24316f7e4814f6f6829b3a1403f7fe6b6f1f4111242d998547a4f387fdb6f411c5587e4ee1e5f80ac775bd0fb89f0f20f5dd10ee9a42ac5080a02377888eb7f9961acfad8ddf68ea67cab1f15a2ce58bfda46223bae1c9201ae662baf445368dc8d30680ee7f1e58d782c3d588f14c91f5bd80d84e9d60d298153d0b781a842d5c05aae5bcf2fc423b6419cadfdaad20044d200e3a850fb950b2b10851a69032db63196767da7a27e23c0835b1180f5dae394433ae57895815b8d3479fbf8e451efd426933b11ba2ceb78057fbe638daaaf9100084541b079a4c5bb3cd705ebc9e2eb46ee8086f03c5c3dc9a5b8b9331b4f01923ac25e0c214f2876d38dc31f3bc6d93681511c7ccd1a672bcc05e62d4a1b8fe27086bd1bfc7fffeff51d16f0c9f6d0004d249bc57667be3bd3109d08d28b8bf96435d4ce310f80d78ba6cfbf4dd1ab65dd37645c5bd9a91fd416ca58992c8ada57a67fd0238460f83b004c9f95aef00da9ad00b96a383a35f8edfb4db21c4c98165063124d79988fdc6b104f9f41bef115cb4fbdb56a5a72097883d68ffdb0c9e1b7c71e30bd4cb589883e71b41ebb174720c5dc357ace7009588aa6f2ef13934aca4bbd330f17506b3713cb5fd4dff3bff8777fada23dc38584edbe34e0ad6d8929e970ce04275424ac06ee070ec76eefba6ac7681693f1f36276127a5f8be92ed65e269fde35c09cac535925a0d4eab290353f1b578949fe8ff8cde7c6c72457a9c1fb4492bed2e93064d5009bbfb0c040bf631e628b61349193471abc17c71c3367f764633c3d989bb33b949f8136de844c0aa5d41d246bf02ac824077a76312c62bbe297ce08b20312a2c0b2a3f8e4a878c1453d793a9cc1a38a8767368efc857b729a207ff9f860dc57c4d7fbe9422d388e95ff0be79f776b7f4307e98fe10ab607e7cbe933306b5be42b95ff490b7dd4cbec76b6590acd621a266178d0b8ea1594d6f33de986cdb62b21168145d86dba8fed10d59c87a5bde995a3aa7251b98b7ed1b15d01e4232624efebf5efae840e733abca5ab8c9e274b78b7c62cfadf341d6a01e2e5a9e7852bc15def79f0443c54ebeaa94ecb949f80ae13339ed301e4b947993f0491e271a1ab44e054fa1d1060014470e2b05fbaf7f95888474c254f9689d04c5dabc5aa28358094d37e8461b0b5711d5c327fc0286dd650ca26e79c5b094d237c63c1cd6a595484700a9dc8f63eed39283a6ee8a52ff93fb12b3fa387ef8113547a11bb501273735806a28e7430106785a33f4dc97f4f17d7e78a662b7d00f6838e57368c74bc4826bff82de4552cd7a7e109919a6cf7ad5e7e7b7a66299bf1d89ba342b13d69fb08e1292b6de85a0097aba02d12f17ab39bf09f3f56a589301313b8971fc97e594847130e504758c5b7721fec3a09bf599e22f63d29dc8772464a4dc91e802f9e4a5cae29bdd42b3d854ca04d3cb44bff6d4ce3c3354a7b00dcb393c70a45c55633a80ab0db8c09ae1b9e15a21057e6916bc1386a9d1afd96bba1f2a464b5684aa52f336f4f633d0de2fce2703408056a68c36195539efd1e21dab31ff37a4f6cfc6c0caa5942b39dbec0b9b0faf87a5d7576987d47c48d5b95ea964ab3863bfe6d4d0470d07bd362d2deb72f50896a1af6f64875ca5ea097eddfb6ac478e87875f506a9683c98f3fc1ecd15aac0400004bc621c9e263fdc0d0ab30c2804c50de4c3c946b58c0ac8b34d9011dfa6c41f7d6d84afffa8a64f87689ee80ae12e203cda of type java.lang.String cannot be converted to JSONArray
E/Config:Grabber:GameModeImComponents: Exception:Value fcf76744443e3b9b807f2f2b24316f7e4814f6f6829b3a1403f7fe6b6f1f4111242d998547a4f387fdb6f411c5587e4ee1e5f80ac775bd0fb89f0f20f5dd10ee9a42ac5080a02377888eb7f9961acfad8ddf68ea67cab1f15a2ce58bfda46223bae1c9201ae662baf445368dc8d30680ee7f1e58d782c3d588f14c91f5bd80d84e9d60d298153d0b781a842d5c05aae5bcf2fc423b6419cadfdaad20044d200e3a850fb950b2b10851a69032db63196767da7a27e23c0835b1180f5dae394433ae57895815b8d3479fbf8e451efd426933b11ba2ceb78057fbe638daaaf9100084541b079a4c5bb3cd705ebc9e2eb46ee8086f03c5c3dc9a5b8b9331b4f01923ac25e0c214f2876d38dc31f3bc6d93681511c7ccd1a672bcc05e62d4a1b8fe27086bd1bfc7fffeff51d16f0c9f6d0004d249bc57667be3bd3109d08d28b8bf96435d4ce310f80d78ba6cfbf4dd1ab65dd37645c5bd9a91fd416ca58992c8ada57a67fd0238460f83b004c9f95aef00da9ad00b96a383a35f8edfb4db21c4c98165063124d79988fdc6b104f9f41bef115cb4fbdb56a5a72097883d68ffdb0c9e1b7c71e30bd4cb589883e71b41ebb174720c5dc357ace7009588aa6f2ef13934aca4bbd330f17506b3713cb5fd4dff3bff8777fada23dc38584edbe34e0ad6d8929e970ce04275424ac06ee070ec76eefba6ac7681693f1f36276127a5f8be92ed65e269fde35c09cac535925a0d4eab290353f1b578949fe8ff8cde7c6c72457a9c1fb4492bed2e93064d5009bbfb0c040bf631e628b61349193471abc17c71c3367f764633c3d989bb33b949f8136de844c0aa5d41d246bf02ac824077a76312c62bbe297ce08b20312a2c0b2a3f8e4a878c1453d793a9cc1a38a8767368efc857b729a207ff9f860dc57c4d7fbe9422d388e95ff0be79f776b7f4307e98fe10ab607e7cbe933306b5be42b95ff490b7dd4cbec76b6590acd621a266178d0b8ea1594d6f33de986cdb62b21168145d86dba8fed10d59c87a5bde995a3aa7251b98b7ed1b15d01e4232624efebf5efae840e733abca5ab8c9e274b78b7c62cfadf341d6a01e2e5a9e7852bc15def79f0443c54ebeaa94ecb949f80ae13339ed301e4b947993f0491e271a1ab44e054fa1d1060014470e2b05fbaf7f95888474c254f9689d04c5dabc5aa28358094d37e8461b0b5711d5c327fc0286dd650ca26e79c5b094d237c63c1cd6a595484700a9dc8f63eed39283a6ee8a52ff93fb12b3fa387ef8113547a11bb501273735806a28e7430106785a33f4dc97f4f17d7e78a662b7d00f6838e57368c74bc4826bff82de4552cd7a7e109919a6cf7ad5e7e7b7a66299bf1d89ba342b13d69fb08e1292b6de85a0097aba02d12f17ab39bf09f3f56a589301313b8971fc97e594847130e504758c5b7721fec3a09bf599e22f63d29dc8772464a4dc91e802f9e4a5cae29bdd42b3d854ca04d3cb44bff6d4ce3c3354a7b00dcb393c70a45c55633a80ab0db8c09ae1b9e15a21057e6916bc1386a9d1afd96bba1f2a464b5684aa52f336f4f633d0de2fce2703408056a68c36195539efd1e21dab31ff37a4f6cfc6c0caa5942b39dbec0b9b0faf87a5d7576987d47c48d5b95ea964ab3863bfe6d4d0470d07bd362d2deb72f50896a1af6f64875ca5ea097eddfb6ac478e87875f506a9683c98f3fc1ecd15aac0400004bc621c9e263fdc0d0ab30c2804c50de4c3c946b58c0ac8b34d9011dfa6c41f7d6d84afffa8a64f87689ee80ae12e203cda of type java.lang.String cannot be converted to JSONArray
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MediaPlayerNative: info/warning (3, 0)
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/OpenGLRenderer: Unsupported Gamut: 147062784
W/MapperHal: buffer descriptor with invalid usage bits 0x2000
W/MediaPlayerNative: info/warning (703, 62540)
W/MediaPlayerNative: info/warning (701, 0)
W/MediaPlayerNative: info/warning (703, 69051)
W/MediaPlayerNative: info/warning (702, 0)
W/MediaPlayerNative: info/warning (3, 0)
W/MediaPlayerNative: info/warning (703, 10821)
W/MediaPlayerNative: info/warning (701, 0)
W/MediaPlayerNative: info/warning (703, 13947)
W/MediaPlayerNative: info/warning (702, 0)
W/MediaPlayerNative: info/warning (3, 0)
I/MediaPlayer: seek to:0 mode:0
W/MediaPlayerNative: info/warning (703, 67808)
    info/warning (701, 0)
W/MediaPlayerNative: info/warning (703, 9582)
    info/warning (702, 0)

React-Native: 0.59
Target SDK: 28
Android OS: Pie
Testing Device: OnePlus 5
Other devices with older OS version (at least Marshmellow) are also affected

I am also facing similar to this. If I play different videos multiple times, its start showing a black screen sometimes and will be there until the app close. Did you figure it out any solution? — Balasubramanian, Jun 25 '19 at 09:51
@Balasubramanian I have not, I'm suspecting it's a library issue with react-native-video or the exoplayer. I've created an issue in the repository but I haven't had a chance to retort on their response to this problem. Because this isn't a problem at all in iOS with the same media. — jrods, Jun 26 '19 at 10:27
It worked for me after upgraded lib from 3.2.1 to 4.0.1. Try with the latest build and use exoplayer instead android. — Balasubramanian, Jun 27 '19 at 06:52
I'm using react-native-video v5.0.2 but it still takes forever(about 10s) to load. — Punter Bad, Apr 15 '20 at 14:18
@SahejMaharjan I must have gotten a work-around, but I unfortunately don't remember what I did — Punter Bad, Jul 25 '21 at 12:14
@Muganwas ok cool.. do let us know if you remember about it. Thanks — Sahej Maharjan, Jul 26 '21 at 12:33

score 4 · Answer 1 · answered Oct 31 '21 at 16:15

By enabling the react-native-video to use the ExoPlayer on Android reduced the load time to only couple of seconds from around earlier 20sec. So now similar playback time on iOS and Android. The file played was 8.8mb .MOV file via Google Cloud storage.

Add inside the whole projects root a react-native.config.js file with following lines:

module.exports = {
    dependencies: {
        "react-native-video": {
            platforms: {
                android: {
                    sourceDir: "../node_modules/react-native-video/android-exoplayer",
                },
            },
        },
    },
}

Used: "react-native-video": "^5.2.0", release mode, on device.

This won't work in version 6 onwards because exoplayer will be the only implementation: https://github.com/react-native-video/react-native-video/blob/master/CHANGELOG.md#version-600-alpha1 — artberri, Dec 30 '22 at 15:27

react-native-video takes too long to start playback

1 Answers1