Android WebView 视频全屏播放 & 视频方向自适应

问题

需求说，在竖屏WebView中横屏视频全屏展示，空白区域太大（或者相反）。

应该竖屏播放

应该横屏播放

想让横屏视频在全屏时横屏展示，竖屏视频在全屏时竖屏展示，以保证最大视频展示区域。

解决

视频全屏展示时的方向，可根据 重力感应 自动调整

1. 设置页面方向随重力感应自适应变化

 (context as? Activity)?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR

代码详情

    /**
     * 显示自定义控件
     */
    private fun showCustomView(view: View?, callback: WebChromeClient.CustomViewCallback?) {
        if (fullscreenContainer != null) {
            callback?.onCustomViewHidden()
            return
        }

        fullscreenContainer = FrameLayout(context).apply { setBackgroundColor(Color.BLACK) }
        customViewCallback = callback
        fullscreenContainer?.addView(view)
        val decorView = (context as? Activity)?.window?.decorView as? FrameLayout
        (context as? Activity)?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR
        systemUiVisibility =
                View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or View.SYSTEM_UI_FLAG_IMMERSIVE or
                View.SYSTEM_UI_FLAG_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
        decorView?.addView(fullscreenContainer)
    }

2. 在退出全屏时，将屏幕方向改为原来页面方向（即最初WebView所在的页面方向）

此处是竖屏

 (context as? Activity)?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT

代码详情

    /**
     * 隐藏自定义控件
     */
    private fun hideCustomView() {
        if (fullscreenContainer == null) {
            return
        }

        val decorView = (context as? Activity)?.window?.decorView as? FrameLayout
        (context as? Activity)?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT
        fullscreenContainer?.removeAllViews()
        decorView?.removeView(fullscreenContainer)
        systemUiVisibility = View.SYSTEM_UI_FLAG_VISIBLE
        fullscreenContainer = null
        customViewCallback?.onCustomViewHidden()
        customViewCallback = null
    }

上述两个方法都是 WebView 的方法

 webChromeClient = object : WebChromeClient() {
            override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
                super.onShowCustomView(view, callback)
                showCustomView(view, callback)
            }

            override fun onHideCustomView() {
                super.onHideCustomView()
                hideCustomView()
            }
        }

3. 设置当前页面所在的 Activity ，屏幕方向改变时，不重走生命周期方法

这一步至关重要！！在 AndroidManifest.xml 中设置如下

android:configChanges="orientation|keyboardHidden|screenSize"

即

注意

退出全屏时，若想上一页面屏幕方向和进入全屏前一致，需要设置：

// 上一页面 横屏
(context as? Activity)?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE

// 上一页面 竖屏
(context as? Activity)?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT

设置成 SENSOR ， 而不是 REVERSE

ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE
// 或
ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT

设置成 REVERSE ，会根据全屏时最终旋转的方向来判断，则有可能导致 视频是倒着的，或者整个页面翻转了 180 度。