【Android】可以全屏播放视频的WebView

前段时间项目遇到一个用H5播放视频的需求，要求能全屏播放视频，但是WebView原生并没有实现全屏播放的需求，不过也并没有完全无法实现全屏，通过WebChromeClient来暴露了两个接口：onShowCustomView和onHideCustomView来控制全屏播放的显示与隐藏，可以通过这两个方法来实现视频的全屏播放功能。下边分析一下具体的需求：

1、需求

1、能全屏播放视频
2、全屏播放时需要展示title(可以为手动传入，默认截取域名)
3、title动画效果
4、title样式(高度背景颜色和返回按钮可配置)
5、返回键响应

2、实现

WebChromeClient实现如下：

WebChromeClient chromeClient = new WebChromeClient() {

    @Nullable
    @Override
    public View getVideoLoadingProgressView() {
        return super.getVideoLoadingProgressView();
    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        showCustomView(view, callback);
        //展示全屏设置为横屏
        mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    }

    @Override
    public void onHideCustomView() {
        hideCustomView();
        //隐藏全屏设置为竖屏
        mActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }
};

除了showCustomView和hideCustomView两个方法外，还需要根据全屏的展示和隐藏来设置Activity的横竖屏。下边来看展示和隐藏全屏的两个方法的具体代码：

private void showCustomView(View view, WebChromeClient.CustomViewCallback callback) {
    if (mCustomView != null) {
        if (callback != null) {
            callback.onCustomViewHidden();
        }

        return;
    }

    FrameLayout decorView = (FrameLayout) mActivity.getWindow().getDecorView();
    decorView.setBackgroundColor(Color.BLACK);
    mFullContainerView = new FrameLayout(mActivity) {
        @Override
        public boolean dispatchTouchEvent(MotionEvent ev) {
            if (ev.getAction() == MotionEvent.ACTION_DOWN) {
                if (mTitleView != null) {
                    if (!mTitleShow) {
                        mTitleShow = true;
                        if (mHideAnimator != null) {
                            mHideAnimator.cancel();
                        }
                        mShowAnimator = ObjectAnimator.ofFloat(mTitleView, ALPHA, mShowAlpha, 1);
                        mShowAnimator.setDuration(1000);
                        mShowAnimator.start();

                        hideTitleView();
                    } else {
                        mTitleShow = false;
                        if (mShowAnimator != null) {
                            mShowAnimator.cancel();
                        }

                        mHideAnimator = ObjectAnimator.ofFloat(mTitleView, ALPHA, 1, 0);
                        mHideAnimator.addListener(new AnimatorListenerAdapter() {

                            @Override
                            public void onAnimationEnd(Animator animation) {
                                mShowAlpha = (float) ((ObjectAnimator) animation).getAnimatedValue();
                                super.onAnimationEnd(animation);
                            }

                        });
                        mHideAnimator.setDuration(1000);
                        mHideAnimator.start();

                        if (mHideRun != null) {
                            mHandler.removeCallbacks(mHideRun);
                        }
                    }

                }
            }
            return super.dispatchTouchEvent(ev);
        }
    };
    mFullContainerView.setBackgroundColor(Color.BLACK);
    mFullContainerView.addView(view, FULL_SCREEN_PARAMS);
    if (mIsShowTitleView) {
        if (mTitleView == null) {
            mTitleView = createTitleView();
        }
        mFullContainerView.addView(mTitleView);
        mTitleShow = true;
        hideTitleView();
    }
    decorView.addView(mFullContainerView, FULL_SCREEN_PARAMS);
    mCustomView = view;
    setStatusBarVisibility(false);
    mCustomViewCallBack = callback;
}

首先判断全屏View是否为空，不为空说明当前还处在全屏状态，作为异常处理，调用WebChromeClient.CustomViewCallback的onCustomViewHidden()方法隐藏全屏。接着获取当前Activity的DecorView，作为容器来容纳全屏播放的View。创建一个FrameLayout对象来作为全屏播放的容器，在创建时，对dispatchTouchEvent方法进行了复写，用来实现title展示的动画效果，其中的hideTitleView()内部是用Handler实现了一个2秒钟后title消失的定时器。参数中的view是视频的容器，将其加入到我们创建的容器中，然后将自定义实现的TitleView加入其中。最后将我们创建的容器放入Activity的容器中。接下来是隐藏全屏的具体代码；

private void hideCustomView() {
    if (mCustomView == null) {
        return;
    }

    setStatusBarVisibility(true);
    FrameLayout decorView = (FrameLayout) mActivity.getWindow().getDecorView();
    decorView.removeView(mFullContainerView);
    mFullContainerView = null;
    mCustomView = null;
    mCustomViewCallBack.onCustomViewHidden();
    mTitleView = null;
    mTitleShow = false;
    mHandler.removeCallbacks(mHideRun);
    mHandler = null;
    setVisibility(VISIBLE);
}

首先就是一场情况判断，如果mCustomView为空，表示当前不在全屏状态，则不用继续执行下边的代码，直接返回。然后设置显示状态栏，并将全屏展示的View从Activity的容器中移除。并将实现动画效果的Handler移除。接下来处理返回按钮点击事件：

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    switch (keyCode) {
        case KeyEvent.KEYCODE_BACK:
            if (mCustomView != null) {
                hideCustomView();
            } else if (canGoBack()) {
                goBack();
            } else {
                mActivity.finish();
            }
            return true;
        default:
            return super.onKeyUp(keyCode, event);
    }
}

优先级为：隐藏全屏-网页回退-销毁当前Activity。这些都完成以后，就拥有了一个可以全屏播放视频的WebView。

备注：必须将使用该WebView的Activity在AndroidManifest中设置为android:configChanges="orientation|screenSize|keyboardHidden"，不然会在全屏时重新执行Activity的生命周期，导致页面重绘。另该WebView已上传至JCenter，若需要使用，则在build.gradle中添加依赖即可。

implementation 'com.wanggle.videowebview:videowebview:1.0.1'