Extremely slow on Android

[eraldoforgoli]

Bug

Hi, I am using the version "react-native-video": "^4.4.5" and it is extremely slow on android (+15seconds slower than in iOS). I am using the player with the basic capabilities to play remote videos from S3 (videos usually 5-20mb).

Platform

Android

Which player are you experiencing the problem on:

• Android MediaPlayer

Environment info

React native info output:

System:
    OS: macOS 11.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Memory: 158.47 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.19.0 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 12.2/12B45b - /usr/bin/xcodebuild
  Languages:
    Java: 12.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: "^4.4.5"

Expected behaviour

1. To load faster

Reproducible sample code

    <Video
      source={{ uri: uri }}
      resizeMode={"contain"}
      style={styles.container}
      controls={false}
      paused={false}
      repeat={true}
    />

[pvn]

@eraldoforgoli Are you running on a simulator or on a real device?

[eraldoforgoli]

@pvn I am runing it on a real device.

[Romick2005]

Don't you think that is because large file you are loading. Also do you directly load file or using progressive download? (specifying bates ranges). Do you have the same behaviour with the same file, but serving from local device storage?

[eraldoforgoli]

@Romick2005 The files are actually quite small (5mb, should be no issue, on iOS it loads instantly). I am not specifying bates ranges.

[Romick2005]

Are you sure that 5mb in mobile is nothing? Than I advise you to log some timing using onLoad, onEnd and also visually compare remote with local video play

[Romick2005]

Also I recommend you to use progressive loading as in your current situation video file is not played until full load 5mb! But with bytes range loading video will start load after for example 200kb loaded and the rest bytes would be on the downloading way. So while playing new bytes would be added to the stream and there would be no delays.

[eraldoforgoli]

@Romick2005 thanks for the advices 👍

[dmytro-sheiko]

@Romick2005 can you explain please how to use bytes range loading in react-native-video ?

[Romick2005]

@frostyk That should be done on backend server that provide video file and could also support progressive video file stream. You can find more detailes here.

[dmytro-sheiko]

@Romick2005 thanks for answer. This helped me to increase loading speed several times.

[gulgulia17]

Can anyone help with that issue? I'm using Laravel(PHP) in the backend

[dungnguyentri3110]

can anyone help me?. i save video on firebase storage. when i load the video link on firebase storage very slow. IOS work well very fast. is that problem of exo player??

[Subiyel]

+1 iOS Loads quickly, however on Android its 3x 4x slower.

[hueniverse]

Without specific video links we cannot do anything about performance issues. I am closing this issue. Please open new issues with specific video links and reproducible code.

[francisco-baptista]

Hi @hueniverse

Here is a sample video: https://files.teamsportz.app/videolibrary/team_127/highlights/game/high_62850701135c5.mp4 that is loading very slowly on Android.

[gokugen]

Any news ? I have a similar problem

[ateeq4112]

Kindly follow below link. This will help you to solve the issue. https://stackoverflow.com/questions/56596041/react-native-video-takes-too-long-to-start-playback

[freeboub]

let's close this issue, This is a known issue on basic Media player. It has been dropped on V6. So 2 solutions:

• swicth to exoplayer implementation
• swicth to version > V6.0 alpha.1

[Moeed-Farooq]

This works for me: Add dependencies in react-native.config.js

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    dependencies: {
        "react-native-video": {
            platforms: {
                android: {
                    sourceDir: "../node_modules/react-native-video/android-exoplayer",
                },
            },
        },
    },
    assets: ['./src/assets/fonts']
};

[xts-bit]

@Moeed-Farooq It fails by being built on React native 0.73 please help anything after adding ../node_modules/react-native-video/android-exoplayer using react-native-video aplha

[Moeed-Farooq]

@xts-bit dont use react-native-video aplha, i am using "react-native-video": "^5.2.1". This above tricks works for me 100% fine.