Android WebView 无法播放 HTML5 视频

Question

我在 Android WebView 中播放 HTML5 视频时遇到问题。我尝试启用硬件加速并使用 WebChromeClient，但视频仍然无法播放。

这是我用来配置 WebView 的代码：-

val settings: WebSettings = binding.webView.settings
settings.setSupportZoom(true)
settings.builtInZoomControls = true
settings.displayZoomControls = false
settings.loadWithOverviewMode = true
settings.layoutAlgorithm = WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING
settings.domStorageEnabled = true
settings.mediaPlaybackRequiresUserGesture = false
settings.allowFileAccess = true
settings.javaScriptEnabled = true
settings.javaScriptCanOpenWindowsAutomatically = true
settings.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK
settings.allowFileAccess = true
settings.allowContentAccess = true

// chromium, enable hardware acceleration
binding.webView.setLayerType(View.LAYER_TYPE_HARDWARE, null)

// Additional settings
settings.setGeolocationEnabled(true) // enable geolocation
settings.databaseEnabled = true // enable database storage API
settings.setSupportMultipleWindows(true) // enable support for multiple windows

binding.webView.scrollBarStyle = WebView.SCROLLBARS_OUTSIDE_OVERLAY
binding.webView.isScrollbarFadingEnabled = true
binding.webView.setDownloadListener(WebViewDownloadListener(this))

我还尝试使用以下 URL 播放此视频：https://watchx.top/v/LIVtq4MIOiex/

任何人都可以帮我找出视频无法播放的原因并提出任何可能的解决方案吗？预先感谢您！

Answer 1

由于格式或编解码器问题，某些 HTML5 视频可能无法在 Android WebView 中播放。

检查视频格式和编解码器：确保您尝试播放的视频采用 Android WebView 支持的格式和编解码器。您可以在 Android 文档中查看支持的格式和编解码器列表。如果视频格式不支持，您可能需要将其转换为兼容的格式。

Answer 2

如果您遇到 HTML5 视频无法在 Android WebView 中正常播放的问题，一个常见问题是 WebView 默认不支持 100% 高度。这可能会导致视频元素渲染不当。要解决此问题，您可以在页面加载完成后向 WebView 中注入一些 CSS 样式。

具体操作方法如下：

重写 onPageFinished 方法以注入自定义 CSS 样式。 适当设置正文和视频元素的尺寸。 这是 Kotlin 中的示例实现：

override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)

val code = """
    javascript:(function() { 
        var node = document.createElement('style');
        node.type = 'text/css';
        node.innerHTML = '
            body {
                margin: 0; /* Remove default margin */
                position: relative;
                width: 100%;
                height: 700px; /* Set body height */
            }
            video {
                width: 100%; /* Set video to 100% width */
                height: auto; /* Maintain aspect ratio */
            }
        ';
        document.head.appendChild(node);
    })()
""".trimIndent()

loadUrl(code)

}