Android WebView设置match_parent时视频黑屏消失但音频正常如何修复

问题现象 #

集成WebView组件播放视频时，给WebView设置固定尺寸（例如200*200）时视频播放完全正常；当WebView配置为layout_width="match_parent"、layout_height="wrap_content"时，视频画面从屏幕消失、页面显示黑屏，但视频流未中断，仍可正常听到持续播放的音频。

复现代码 #

问题触发的宽高配置：

android:layout_width="match_parent"
android:layout_height="wrap_content"

当前使用的布局代码：

<androidx.core.widget.NestedScrollView
    android:id="@+id/webScrollContainer"
    android:layout_width="200sp"
    android:layout_height="200sp"
    android:fillViewport="true"
    android:visibility="@{playerType == PlayerViewType.WEB ? View.VISIBLE : View.GONE}"
    tools:visibility="visible">

    <com.onixcamera.ui.view.custom.SizableWebView
        android:id="@+id/testWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        android:fillViewport="true"
        android:focusable="true"
        android:isScrollContainer="false"
        android:visibility="visible"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:layout_scrollFlags="scroll|exitUntilCollapsed" />

</androidx.core.widget.NestedScrollView>

视频加载核心逻辑：

binding.testWebView.loadUrl(url)

根本原因 #

1. WebView在wrap_content测量模式下，无法正确获取内嵌video标签的实际渲染高度，会触发硬件加速层的视口计算错误，视频渲染缓冲区被判定为处于不可见区域直接丢弃，仅保留音频解码流程。
2. 当前布局存在配置冲突：layout_scrollFlags、layout_behavior属性仅对CoordinatorLayout的直接子View生效，放在NestedScrollView的子View上会干扰正常布局测量；NestedScrollView的滚动逻辑和WebView内部的视口判断逻辑冲突，会进一步放大渲染异常。

修复步骤 #

• 禁止给承载视频的WebView使用wrap_content高度：要么给WebView设置固定dp尺寸，要么在自定义SizableWebView的onMeasure方法中主动计算确定的高度值，调用setMeasuredDimension返回固定测量结果，不要依赖系统默认的wrap_content测量逻辑。
• 清理无效布局属性：移除WebView上的app:layout_scrollFlags、app:layout_behavior属性，这类属性在当前布局层级下不生效，只会干扰测量流程。
• 优化WebView基础配置，在加载url前添加如下设置：

binding.testWebView.setLayerType(View.LAYER_TYPE_HARDWARE, null)
binding.testWebView.settings.apply {
    javaScriptEnabled = true
    domStorageEnabled = true
    mediaPlaybackRequiresUserGesture = false
    useWideViewPort = true
    loadWithOverviewMode = true
}

• 非必要不要把播放视频的WebView嵌套在NestedScrollView内：WebView本身自带滚动容器能力，额外嵌套滚动容器很容易触发视口计算异常。如果业务必须嵌套，将WebView的android:isScrollContainer属性改为true，关闭WebView内部滚动和外层容器的滚动冲突。
• 协同前端做H5适配：要求前端给页面内的video标签设置width: 100%; height: 100%; object-fit: contain样式，确保视频元素能撑满WebView视口，避免元素高度测量为0触发渲染丢弃。

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