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

这篇具有很好参考价值的文章主要介绍了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.
  1. 打开硬件加速(3.0以上版本支持)
  2. set一个WebChromClient,实现onShowCustomView() 方法和onHideCustomView()方法
  3. 全屏支持

二、实现解决

  1. 打开硬件加速
  • 在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" />
  1. WebView中设置WebChromClient实现接口onShowCustomView() 方法和onHideCustomView()方法, 实现后即显示全屏播放按钮,但是点击无反应,需要实现全屏支持。

  2. 全屏支持实现:WebView在点击全屏按钮后调用onShowCustomView方法,而全屏的视频会在其参数view中进行渲染。我们需要在Activity中写一个viewRoot,在onShowCustomView触发后,将其view传入viewRoot,且使APP横屏,达到全屏显示。

@SuppressLint("StaticFieldLeak")
private var mCustomView: View? = null //全屏渲染视频的View
private var webRoot: FrameLayout? = null// 显示全屏视频的布局
private var mCustomViewCallback: CustomViewCallback? = null

@SuppressLint("SourceLockedOrientationActivity")
override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
    super.onShowCustomView(view, callback)
    try {
        if (mCustomView != null) { //当上一个view存在时,隐藏全屏
            callback?.onCustomViewHidden()
            return
        }
        mCustomView = view
        webRoot?.addView(mCustomView)
        mCustomViewCallback = callback
        webView?.visibility = View.GONE
        val actionBar = supportActionBar
        actionBar?.hide()
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
    } catch (e: Exception) {
        e.printStackTrace()
    }
}

@SuppressLint("SourceLockedOrientationActivity")
override fun onHideCustomView() {
    try {
        webView?.visibility = View.VISIBLE
        val actionBar = supportActionBar
        actionBar?.show()
        if (mCustomView == null) { //当上一个view不存在时,不处理
            return
        }
        mCustomView?.visibility = View.GONE
        webRoot?.removeView(mCustomView)
        mCustomViewCallback?.onCustomViewHidden()
        mCustomView = null
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
    } catch (e: Exception) {
        e.printStackTrace()
    }
    super.onHideCustomView()
} 

override fun onProgressChanged(view: WebView?, newProgress: Int) {
    super.onProgressChanged(view, newProgress)
    progressBar?.progress = newProgress
}

xml

<FrameLayout
    android:id="@+id/web_root"
    app:layout_constraintBottom_toTopOf="@id/v_bottom"
    app:layout_constraintTop_toBottomOf="@id/v_top"
    android:layout_width="match_parent"
    android:layout_height="0dp">

   <WebView
         android:id="@+id/webview"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
   
    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="1.5dp"
        android:max="100"
        android:progressDrawable="@drawable/webview_progress_bar_style" />
</FrameLayout>

三、写在最后

此文章为个人开发时记录,有时时间有限,无法深入研究,若看到此文章后有其他见解或解决方式,欢迎留言交流👇👇👇

————————————————
版权声明:转载请附上原文出处链接及本声明。
原文链接:
https://blog.csdn.net/weixin_44158429/article/details/130217214文章来源地址https://www.toymoban.com/news/detail-493111.html

到了这里,关于Android WebView H5视频播放实现全屏播放功能、全屏按钮不显示、灰显、点击无效问题解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包