WebView视频全屏播放

WebView视频全屏播放

在StackoverFlow上就看到一篇实现WebView全屏播放Youtube网页视频的方法，这个方法很不错。

废话不多说，直接看操作：继承WebChromeClient，重写WebChromeClient中的onShowCustomView(View , CustomViewCallback)和onHideCustomView()方法来实现网页视频全屏播放功能：

val chromeClient = object : WebChromeClient() {

    override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
        super.onShowCustomView(view, callback)
    }
    
    override fun onHideCustomView() {
        super.onHideCustomView()
    }
    
    //该方法已废弃
    @Deprecated("Deprecated in Java")
    override fun onShowCustomView(view: View?, requestedOrientation: Int, callback: CustomViewCallback?) {
        super.onShowCustomView(view, requestedOrientation, callback)
    }
    
}

首先看onShowCustomView(View view, CustomViewCallback callback)方法

/**
     * Notify the host application that the current page has entered full screen mode. After this
     * call, web content will no longer be rendered in the WebView, but will instead be rendered
     * in {@code view}. The host application should add this View to a Window which is configured
     * with {@link android.view.WindowManager.LayoutParams#FLAG_FULLSCREEN} flag in order to
     * actually display this web content full screen.
     *
     * <p>The application may explicitly exit fullscreen mode by invoking {@code callback} (ex. when
     * the user presses the back button). However, this is generally not necessary as the web page
     * will often show its own UI to close out of fullscreen. Regardless of how the WebView exits
     * fullscreen mode, WebView will invoke {@link #onHideCustomView()}, signaling for the
     * application to remove the custom View.
     *
     * <p>If this method is not overridden, WebView will report to the web page it does not support
     * fullscreen mode and will not honor the web page's request to run in fullscreen mode.
     *
     * <p class="note"><b>Note:</b> if overriding this method, the application must also override
     * {@link #onHideCustomView()}.
     *
     * @param view is the View object to be shown.
     * @param callback invoke this callback to request the page to exit
     * full screen mode.
     */
    public void onShowCustomView(View view, CustomViewCallback callback) {};

该方法传入一个View和CustomViewCallback回调，其中view就是包含全屏播放视频WV.vo的FrameLayout，callback则需要在退出全屏播放时调用。这两个我们都需要保存到变量中：

val chromeClient = object : WebChromeClient() {
        private var customView: View? = null
        private var customViewCallback: CustomViewCallback? = null
        ...
    }

接下来完善一些进入全屏播放的逻辑：

override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
        //自定义view不空，说明已经进入全屏，这时候再点击就推出全屏播放
        if (customView != null) {
            onHideCustomView()
            return
        }
        
        //保存这两个变量
        customView = view
        customViewCallback = callback
        
        //将全屏播放视频的view添加到我们当前的根布局中，注意必须用MATCH_PARENT
        val layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        (binding.root as ViewGroup).addView(customView, 0, layoutParams) //必要时添加到第一个位置
       
        //切换横屏，体验更好
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
    }

其次WebView退出全屏视频播放会回调onHideCustomView()方法：

/**
     * Notify the host application that the current page has exited full screen mode. The host
     * application must hide the custom View (the View which was previously passed to {@link
     * #onShowCustomView(View, CustomViewCallback) onShowCustomView()}). After this call, web
     * content will render in the original WebView again.
     *
     * <p class="note"><b>Note:</b> if overriding this method, the application must also override
     * {@link #onShowCustomView(View, CustomViewCallback) onShowCustomView()}.
     */
    public void onHideCustomView() {}

在该回调方法中需要移除全屏播放的View，并且释放之前保存的变量：

override fun onHideCustomView() {
        //从根布局中移除全屏播放的view
        (binding.root as ViewGroup).removeView(customView)
        //还记得前面保存的customViewCallback，这时候需要回调通知WebView已经推出全屏了
        customViewCallback?.onCustomViewHidden() 
      
        //移除保存的变量
        customView = null
        customViewCallback = null
         
        //根据业务需要重新恢复屏幕方向
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
    }

为了更好的用户体验，全屏播放一般都是横屏，所以在两个回调方法中我们都调用了setRequestedOrientation( int requestedOrientation)方法，该方法会导致配置变化，因此还需要在manifest.xml中给当前Activity加上configChanges：

<activity
	android:name=".view.ui.webview.FullVideoWebViewActivity"
	android:configChanges="orientation|screenSize|screenLayout"
	android:exported="true">

并且重写Activity中的onConfigurationChanged(newConfig: Configuration)方法：

override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
    }

基本上用不到的知识储备又增加了。