android webview全屏视频,【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'