ExoPlayer 在 Compose 中启动视频时黑屏 0.3 秒

Question

我有

ExoPlayer

和 Compose，它可以工作：

val context = LocalContext.current
    val exoPlayer = remember {
        ExoPlayer.Builder(context).build().apply {
            val defaultDataSourceFactory = DefaultDataSource.Factory(context)
            val dataSourceFactory: DataSource.Factory = DefaultDataSource.Factory(
                context,
                defaultDataSourceFactory
            )

            val packageName = context.applicationContext.packageName
            val uri = Uri.parse("android.resource://${packageName}/${R.raw.xeal_tutorial_compressed}")
            val source = ProgressiveMediaSource.Factory(dataSourceFactory)
                .createMediaSource(MediaItem.fromUri(uri))

            setMediaSource(source)
            prepare()
            playWhenReady = true
            repeatMode = REPEAT_MODE_ONE
        }
    }

    AndroidView(
        factory = { context ->
            PlayerView(context).apply {
                player = exoPlayer
            }
        }
    )

问题是第一次启动时，前 0.3 秒我看到黑屏。我认为这是渲染问题。 如果我将

XML

文件与

VideoView

一起使用，我会设置

videoView.setZOrderOnTop(true)

我在撰写时代之前使用过。 如何在 Compose ExoPlayer 中解决这个问题？

Answer 1

通过调整zIndex值，可以控制Composables的绘制顺序，实现类似setZOrderOnTop(true)的叠加效果。

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex
import androidx.navigation.NavController
import com.google.accompanist.exoplayer.ExoPlayer
import com.google.accompanist.exoplayer.rememberVideoPlayerController

@Composable
fun VideoPlayerOverlay() {
    val videoPlayerController = rememberVideoPlayerController()
    videoPlayerController.setSource("your_video_url_here")

    Box(
        modifier = Modifier
            .fillMaxSize()
    ) {
        // Content underneath the video
        Text(
            text = "This is some content",
            fontSize = 24.sp,
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
                .zIndex(1f) // Place this content on a higher layer
        )

        // Video player overlay
        ExoPlayer(
            exoPlayer = videoPlayerController,
            modifier = Modifier
                .fillMaxSize()
                .zIndex(2f) // Place the video player on top
        )
    }
}

@Preview
@Composable
fun VideoPlayerOverlayPreview() {
    VideoPlayerOverlay()
}

Answer 2

只有当我按时间将

ExoPlayer

的初始化及其在

PlayerView

中的使用分开时，我才能避免最初的 0.3 秒黑屏。 重点是给新创建的

ExoPlayer

一些时间来准备工作。 就我而言，我在

ExoPlayer

中创建了

viewModel

，然后将其传递给

Composable

函数，其中

PlayerView

使用它。使用后，

viewModel

中的关闭功能被激活以清除

ExoPlayer