CODEWITHSUNDEEP
android-jetpack-composeexoplayer
Donny Rozendal
Donny Rozendal

Reputation: 1054

For ExoPlayer in Jetpack Compose, the player shows a black screen after pausing and resuming the app for non-looping videos

I have a screen that has a player with a video that plays once (so it doesn't loop). After the video finished playing, the player keeps showing the last frame, which is what I want. However, if the video finished playing and I turn the screen off and on, then the player shows a black screen. What I want, is that the player keeps showing the last frame. Is this possible? This issue also persists if the non-looping video hasn't finished playing yet.

It's important to note that this issue doesn't exist for looping videos.

There is a lot of documentation about the lifecycle of the player in regular Android, but none for Compose. I could only find articles online about a Compose version, where the player is released in onDispose.

I have a Jetpack Compose implementation of ExoPlayer using AndroidView (since there is no native support yet). Here it is:

@Composable
fun VideoLayout(@RawRes rawResource: Int) {
    val context = LocalContext.current
    val uri = RawResourceDataSource.buildRawResourceUri(rawResource)
    val mediaItem = MediaItem.fromUri(uri)
    val exoPlayer = remember(context, mediaItem) {
        ExoPlayer.Builder(context).build().apply {
            addMediaItem(mediaItem)
            prepare()
            play()
            repeatMode = REPEAT_MODE_OFF
        }
    }

    DisposableEffect(exoPlayer) { onDispose { exoPlayer.release() } }

    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = {
            StyledPlayerView(it).apply {
                player = exoPlayer
                resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
                useController = false
            }
        }
    )
}

Upvotes: 4

Views: 2347

Answers (1)

Alexey Simchenko
Alexey Simchenko

Reputation: 460

I had the same black screen at the start of a video and I solved it by creating ExoPlayer in my viewModel before using and passing into composable function that uses it and releasing exoPlayer?.release() after using exoPlayer.

In my case I needed to show some short looped tutorial, so I didn't want to have all the time a created ExoPlayer, so when user presses a tutorial button - a player is created and then passed to composable function to play it. When user closes a tutorial - a player is released in viewModel.

So main idea is to move ExoPlayer out of the function that uses it to give more time for a player to prepare to work

Upvotes: 0

Related Questions