Android WebView H5视频播放实现全屏播放功能、全屏按钮不显示、灰显、点击无效问题解决方案

Z癸

已于 2023-04-18 11:29:11 修改

阅读量8.1k

点赞数

分类专栏： WebView优化 bug修复开发经验记录文章标签： android 音视频 webview

于 2023-04-18 11:22:24 首次发布

本文链接：https://blog.csdn.net/weixin_44158429/article/details/130217214

版权

文章介绍了在Android中使用WebView实现H5视频的全屏播放功能，包括开启硬件加速，设置WebChromeClient并实现onShowCustomView和onHideCustomView方法。在解决全屏按钮不显示、灰显和点击无效的问题时，关键在于处理屏幕方向和自定义视图。通过在Activity中处理布局和屏幕方向变化，实现了全屏视频的正确显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android WebView H5视频播放实现全屏播放功能、全屏按钮不显示、灰显、点击无效问题解决方案

一、官方介绍

HTML5 video support
HTML5 Video support In order to support inline HTML5 video in your application, 
you need to have hardware acceleration turned on, and set a WebChromeClient. 
For full screen support, implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback) 
and onHideCustomView() are required, getVideoLoadingProgressView() is optional.

打开硬件加速(3.0以上版本支持)
set一个WebChromClient，实现onShowCustomView() 方法和onHideCustomView()方法
全屏支持

二、实现解决

打开硬件加速

在Manifest中，对应的Activity添加: android:hardwareAccelerated = “true”。
防止h5重新加载：Manifest中，对应的Activity添加: android:configChanges=“keyboardHidden|orientation|screenSize”
切换横屏时，屏幕的H5内容始终以竖屏显示：Manifest中，对应的Activity添加: android:screenOrientation=“portrait”

<activity
    android:name=".uicomponent.WebViewActivity"
    android:configChanges="orientation|screenSize|keyboardHidden" //防止h5重新加载
    android:hardwareAccelerated="true" //硬件加速
    android:screenOrientation="portrait" //当我们切换横竖屏的时候，屏幕的内容始终以竖屏显示，而不会根据屏幕的方向来显示内容
    android:theme="@style/AppTheme.NoActionBar" />

WebView中设置WebChromClient实现接口onShowCustomView() 方法和onHideCustomView()方法, 实现后即显示全屏播放按钮，但是点击无反应，需要实现全屏支持。
全屏支持实现：WebView在点击全屏按钮后调用onShowCustomView方法，而全屏的视频会在其参数view中进行渲染。我们需要在Activity中写一个viewRoot，在onShowCustomView触发后，将其view传入viewRoot，且使APP横屏，达到全屏显示。

@SuppressLint(

最低0.47元/天解锁文章