[expo-video] Black screen when reusing a videoplayer on android #35012
Description
Minimal reproducible example
https://github.com/dr-thca/ExpoVideoBug
See app/index.tsx
export default function Quad() {
const anotherlink = "https://www.w3schools.com/html/mov_bbb.mp4";
const videoPlayer = useVideoPlayer(anotherlink);
return (
<View style={styles.stepContainer}>
<VideoView style={styles.video} player={videoPlayer} />
<VideoView style={styles.video} player={videoPlayer} />
<VideoView style={styles.video} player={videoPlayer} />
<VideoView style={styles.video} player={videoPlayer} />
</View>
);
}What platform(s) does this occur on?
Android
Where did you reproduce the issue?
in a standalone app (android simulator)
Summary
I'm working on a feature where we want to persist a video player when navigating. The videoplayer is stored in a context and "fetched" when needed. This works as expected on iOS, but not on android.
On Android the video still seems to be playing but all you get is a black screen. The controls are still responsive for the player. See video:
<redacted video>
EDIT:
The general issue is mounting a videoplayer several times on android. The same issue occurs if you mount them in the same component. The reproduction has been updated accordingly. Heres a better demonstration:
better-bug-video-1.mov
The issue persists with two videos as well.
I tried mounting the second video player after a couple of seconds. The second videoplayer will play fine, but the first one will freeze on the last frame
Is this related? google/ExoPlayer#4880
Again our use case is not necessarily playing the same video on the same screen, but reusing the player instance between navigation. Play video on screen A, and then continue the video on screen B reusing the full player state and video buffer
Edit 2: For our use case (persisting videoplayers between react-native-navigation screens) we decided to use isFocused and unmount the viewer when navigating. It causes a flash, but we might be able to work around it.
All in all, adding this clarification in the docs might help other uses. I could draft something up if necessary
Environment
expo-env-info 1.2.2 environment info:
System:
OS: macOS 15.3.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.13.0/bin/npm
Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.15.2 - /Users/thca/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: DriverKit 24.2, iOS 18.2, macOS 15.2, tvOS 18.2, visionOS 2.2, watchOS 11.2
Android SDK:
API Levels: 33, 34, 35
Build Tools: 30.0.3, 33.0.0, 34.0.0, 35.0.0
System Images: android-25 | ARM 64 v8a, android-25 | Google APIs Intel x86_64 Atom, android-26 | ARM 64 v8a, android-26 | Google APIs ARM 64 v8a, android-34 | Google APIs ARM 64 v8a, android-34 | Google Play ARM 64 v8a
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11330709
Xcode: 16.2/16C5032a - /usr/bin/xcodebuild
npmPackages:
expo: ~52.0.35 => 52.0.35
expo-router: ~4.0.17 => 4.0.17
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
react-native: 0.76.7 => 0.76.7
react-native-web: ~0.19.13 => 0.19.13
npmGlobalPackages:
eas-cli: 14.4.0
Expo Workflow: bare
Expo Doctor Diagnostics
15/15 checks passed. No issues detected!