前段时间项目遇到一个用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'
