webview加载H5中video.js视频全屏播放问题（H5不包含搜索框）

问题描述

webview中加载HTML网页中有一段视频，视频可以正常播放但是，视频底部的全屏按钮没了，只有一个音量按钮。修改后，点击全屏，视频不能播放，页面白屏，也不能返回。
实现思路：

1. 要打开硬件加速
2. 设置 WebChromeClient ,并实现 onShowCustomView() 方法和onHideCustomView()方法
3. 要支持全屏

开启硬件加速和横竖屏切换

找到webview所在的acvitity的manifest文件配置，开启硬件加速和横屏切换，避免声明周期切换。

<activity
            android:name=".home.HomeActivity"
            android:launchMode="singleTop"
            android:hardwareAccelerated="true"
            android:screenOrientation="portrait"
            android:configChanges="orientation|screenSize|keyboardHidden"
            android:windowSoftInputMode="stateHidden|stateAlwaysHidden|adjustPan">
        </activity>

增加视频全屏时布局容器

在webview所在的xml布局文件同级下增加视频全屏时候的容器布局，不然全屏时候无法播放视频，有白屏现象产生，遮挡全屏下的视频播放。

 <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <FrameLayout
                android:id="@+id/fl_video"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="gone"></FrameLayout>
            <wendu.dsbridge.DWebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </RelativeLayout>

自定义设置WebChromeClient

在webview的父容器acvitity或者fragment中自定义内部类WebChromeClient
重写其中的onShowCustomView（全屏时调用）和onHideCustomView（竖屏时调用）两个方法

 private class MyWebChromeClient extends WebChromeClient {
        private CustomViewCallback mCustomViewCallback;
        //  横屏时，显示视频的view
        private View mCustomView;

        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            super.onShowCustomView(view, callback);
            if (mCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }

            mCustomView = view;
            mCustomView.setVisibility(View.VISIBLE);
            mCustomViewCallback = callback;
            fl_video.addView(mCustomView);
            fl_video.setVisibility(View.VISIBLE);
            fl_video.bringToFront();
            getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }

        @Override
        public void onHideCustomView() {
            super.onHideCustomView();
            if (mCustomView == null) {
                return;
            }
            mCustomView.setVisibility(View.GONE);
            fl_video.removeView(mCustomView);
            mCustomView = null;
            fl_video.setVisibility(View.GONE);
            try {
                mCustomViewCallback.onCustomViewHidden();
            } catch (Exception e) {
            }
            getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖屏

        }
    }

我的webview是在fragment中，如果是在acvitity中使用setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE)；来设置横屏

横竖屏切换监听

 @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        switch (newConfig.orientation) {
            case Configuration.ORIENTATION_LANDSCAPE:
                getActivity().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
                getActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                break;
            case Configuration.ORIENTATION_PORTRAIT:
                getActivity().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                getActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
                break;

        }
    }

websetting配置

private void initWebSetting() {
        if (webView!=null){
            webView.addJavascriptObject(new JsApi(), null);
        }else {
            return;
        }
        final WebSettings webSettings = webView.getSettings();
        // 设置WebView属性，能够执行Javascript脚本
        webSettings.setAllowFileAccess(true);// 设置允许访问文件数据
        webSettings.setDomStorageEnabled(true);
        webSettings.setDatabaseEnabled(true);
        webSettings.setBuiltInZoomControls(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setTextZoom(100);
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置webview缓存模式
        webView.setVerticalScrollBarEnabled(false); // 取消Vertical ScrollBar显示
        webView.setHorizontalScrollBarEnabled(false); // 取消Horizontal ScrollBar显示
        //设置自适应屏幕，两者合用
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        webView.setFocusable(false); // 去掉超链接的外边框
        webView.setWebChromeClient(new MyWebChromeClient());
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onScaleChanged(WebView view, float oldScale, float newScale) {
                super.onScaleChanged(view, oldScale, newScale);
            }
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                if (url.contains("login")){
                    Constants.isRefreshCourse=true;
                }
                super.onPageStarted(view, url, favicon);
            }
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            }

            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
//                super.onReceivedSslError(view, handler, error);
                //默认的处理方式，WebView变成空白页
//                handler.cancel();
                //接受证书
                handler.proceed();
                //其他处理
//                handleMessage(Message msg);
            }
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                return false;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }
        });

    }

至此就实现了webview中加载包含video.js的H5页面，视频全屏播放的问题。