Jetpack Compose使用VideoView时背景变黑的解决方法咨询

问题根源 #

VideoView作为原生Android控件，默认背景为黑色，嵌入Compose的AndroidView后，其黑色背景会覆盖原本的白色界面背景。

解决方案 #

1. 直接给VideoView设置白色背景

修改你的CommonVideoView（注：当前代码中函数名写错为CommonWebView，建议修正）实现，在创建VideoView时显式设置背景色：

@Composable
fun CommonVideoView(urlToRender: String, modifier: Modifier) {
    AndroidView(factory = { context ->
        VideoView(context).apply {
            setVideoPath(urlToRender)
            setOnCompletionListener { start() }
            // 设置VideoView背景为白色
            setBackgroundColor(Color.WHITE)
            start()
        }
    }, modifier = modifier)
}

2. 给AndroidView的Modifier添加白色背景

如果不想修改VideoView本身，可以在AndroidView的Modifier中添加白色背景，确保覆盖VideoView的黑色：

@Composable
fun CommonVideoView(urlToRender: String, modifier: Modifier) {
    AndroidView(factory = { context ->
        VideoView(context).apply {
            setVideoPath(urlToRender)
            setOnCompletionListener { start() }
            start()
        }
    }, modifier = modifier.background(Color.White))
}

3. 给外层Column设置全局白色背景

确保整个Column的背景为白色，避免VideoView的黑色渗透：

Column(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .background(Color.White) // 添加全局白色背景
) {
    // ... 原有内容
}

额外提示 #

• 检查视频文件本身是否带有黑色边框或背景，若为视频自身问题，需单独处理视频文件。
• 代码中CommonWebView是明显笔误，建议修正为CommonVideoView，避免代码混淆。

内容的提问来源于stack exchange，提问作者ahmed saber