Android Compose WebView无法全屏播放视频的解决方法咨询

要让WebView里的YouTube视频正常触发全屏，核心是自定义WebChromeClient处理全屏回调，同时结合Compose的状态管理切换全屏布局。以下是具体实现步骤：

1. 维护全屏状态 #

在Compose组件中添加状态变量，控制全屏模式的切换：

val isFullScreen = remember { mutableStateOf(false) }
val fullScreenView = remember { mutableStateOf<View?>(null) }
val customViewCallback = remember { mutableStateOf<WebChromeClient.CustomViewCallback?>(null) }

2. 自定义WebChromeClient处理全屏事件 #

替换默认的WebChromeClient()，重写全屏相关方法处理视图显示与隐藏：

it.webChromeClient = object : WebChromeClient() {
    override fun onShowCustomView(view: View, callback: WebChromeClient.CustomViewCallback) {
        super.onShowCustomView(view, callback)
        // 切换至全屏状态
        isFullScreen.value = true
        fullScreenView.value = view
        customViewCallback.value = callback
        // 隐藏系统UI，实现沉浸式全屏
        (context as Activity).window.apply {
            decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_FULLSCREEN
                    or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                    or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                    or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION)
            setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN)
        }
    }

    override fun onHideCustomView() {
        super.onHideCustomView()
        // 退出全屏状态
        isFullScreen.value = false
        fullScreenView.value?.visibility = View.GONE
        customViewCallback.value?.onCustomViewHidden()
        // 恢复系统UI
        (context as Activity).window.apply {
            decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_VISIBLE
            clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)
        }
    }
}

3. 适配Compose布局切换 #

根据全屏状态，在Compose中切换显示WebView或全屏视频视图：

if (isFullScreen.value) {
    fullScreenView.value?.let { view ->
        AndroidView(
            factory = { view },
            modifier = Modifier.fillMaxSize()
        )
    }
} else {
    WebView(
        state = webViewState,
        navigator = navigator,
        modifier = Modifier.fillMaxSize(),
        onCreated = { /* 保留你原有的WebView配置 */ }
    )
}

4. 补充Activity配置检查 #

确保你的Activity在Manifest中已配置：

<activity
    android:name=".YourActivity"
    android:configChanges="orientation|screenSize|keyboardHidden"
    android:resizeableActivity="true"
    android:supportsPictureInPicture="true">
</activity>

关键说明 #

• onShowCustomView会在YouTube触发全屏时被调用，此时需要替换视图为全屏显示并隐藏系统UI。
• onHideCustomView处理退出全屏逻辑，恢复原有WebView和系统UI状态。
• Compose中通过AndroidView承载原生视频视图，实现跨平台视图的切换。

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