expo: [Android] Video Player does not load Videos in Playlist (but works on iOS)

Continuing

• https://github.com/expo/expo/issues/2028
• and https://github.com/expo/expo/issues/958

Environment

  Expo CLI 2.3.5 environment info:
    System:
      OS: macOS 10.14.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.1/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.0 AI-171.4408382
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      expo: 31.0.6 => 31.0.6
      react: 16.5.0 => 16.5.0
      react-native: https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz => 0.57.1
    npmGlobalPackages:
      expo-cli: 2.3.5

App’s target (iOS, Android, Client, Standalone, ExpoKit)

• iOS
• Android

Steps to Reproduce

We have prepared a demo based on the playlist example from expo. Note, we updated the source to the SDK "sdkVersion": "31.0.0", version.

You can clone it here https://github.com/natterstefan/playlist-example (git clone git@github.com:natterstefan/playlist-example.git) and check out the prepared example branch: git checkout example/android-video-bug.

FYI, the video file is always the same. We installed a proxy. It points to the same video source, but allows different urls.

Steps to reproduce:

1. Now start the app with npm start
2. Open it in Android
3. and play (at least start) video after video.
4. take a look at the console.logs, as at one point the last log will be ON LOAD START and the VideoPlayer is just gone and won’t react. If the video works ONLOAD would be logged.

We also tried uncommenting

// // UNCOMMENT THIS TO TEST THE OLD androidImplementation:
// androidImplementation: 'MediaPlayer',

as suggested here but it did not help. The video did not play at all then.

Expected Behavior

As we are working on a similar use case in our app (playlist like feature) we would expect Android to be capable of playing n videos in the list, similar to iOS. But instead, it “stops/breaks” after a random number of videos played.

Actual Behavior

As described, the Player just disappears, meaning the user sees the app’s background. We were also not capable of catching an error, to try it again. Just check out the example provided above please.

What we discovered so far

• it is not related to the video source url. We tried Vimeo and our own domain/urls.
• it is not related to our tested video files. We tried different videos.
• on iOS there seems not issue at all, also mentioned here https://github.com/expo/expo/issues/2028#issue-344415833.
• in the example unloadAsync and loadAsync is used and in our own project as of now we just render the <Video /> component with the source prop. (eg. source={{uri: videoUrl}}. Both ways ran into the same issue. 😕
• there was no difference in running the Android app with the debugger tools on the local machine (with expo-cli) or in production mode after publishing it on expo (with expo publish).

I stumbled upon https://github.com/expo/expo/issues/2691 as well, but I am not sure yet if this is related. Because he said in the issue

The APP component gets stuck on await this._video.loadAsync(source, initialStatus); for ever and doesn’t run the other functions,

Maybe it is related and helps finding a solution for both issues.

Screenshots

This is what the log says. As you can see at the bottom it stops and does not properly continue.

This is what we see in the app then, the player is just gone:

Device Details

Reproducible Demo

• https://github.com/natterstefan/playlist-example
• check out the prepared example branch: git checkout example/android-video-bug
• FYI, the video file is always the same. We installed a proxy. It points to the same video source, but allows different urls.

NOTE

We also had issues, if we did not wrap this part of the code in the playlist example with the if statement:

this.playbackInstance.setOnPlaybackStatusUpdate(null);

// ... some stuff in between

this._video.setOnPlaybackStatusUpdate(this._onPlaybackStatusUpdate);

In both cases this._video and this.playbackInstance is undefined. Not sure what this is and if it is related. Because this._onPlaybackStatusUpdate still works though.

Please keep in mind, that the urls provided above for the demo videos will not stay online forever. Maybe we’ll remove it when the issue is resolved. Thank you.