WebView 视频播放，全屏按钮显示不出来，全屏后不能播放视频

最近项目的一个需求，需要在Webview 里面播放视频遇到了一些问题：

视频可以正常播放但是，视频底部的全屏按钮没了，只有一个音量按钮。修改后，点击全屏，视频不能播放。

接下来一 一解决：

问题1 ：没有全屏按钮：

如图：可以看到只有一个音量按钮，没有全屏按钮。

查了一下资料，文档上写着支持视频播放的条件：

In order to support inline HTML5 video in your application, 
you need to have hardware acceleration turned on, and set a WebChromeClient. 
For full screen support, 
implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback)
and onHideCustomView() are required, getVideoLoadingProgressView() is optional.

 意思就是：

    1、要打开硬件加速

    2、设置 WebChromeClient ,并实现 onShowCustomView()  方法和onHideCustomView()方法。

    3、要支持全屏

接下来就是解决问题：

1、首先开启硬件加速

在AndroidMainfest.xml中，当前webView所在类的标签中添加  : android:hardwareAccelerated="true"

  <activity
    android:name="..."
    android:hardwareAccelerated="true"/>

2、设置 WebChromeClient

我们添加一个内部类，实现 WebChromeClient, 并复写其中的方法

 private class MyWebChromeClient extends WebChromeClient {

        // 全屏的时候调用
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {

            super.onShowCustomView(view, callback);
         
        }

       // 切换为竖屏的时候调用
        @Override
        public void onHideCustomView() {

            super.onHideCustomView();
            
        }
    }

写到这里全屏按钮就已经显示出来了。当然，我们我们还要设置一下WebView 的相关属性

    /**
     * 设置webView 相关属性
     * */
    private void initWebView() {
        webview = (WebView) findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);// 设置支持javascript脚本
        webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);//设置webview缓存模式
        webview.setVerticalScrollBarEnabled(false); // 取消Vertical ScrollBar显示
        webview.setHorizontalScrollBarEnabled(false); // 取消Horizontal ScrollBar显示
        //设置自适应屏幕，两者合用
        webview.getSettings().setUseWideViewPort(true);
        webview.getSettings().setLoadWithOverviewMode(true);

        webview.getSettings().setAllowFileAccess(true);// 允许访问文件
        webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        webview.setFocusable(false); // 去掉超链接的外边框
        webview.getSettings().setDefaultTextEncodingName("GBK");//设置文本编码（根据页面要求设置： utf-8）
        webview.setWebChromeClient(new MyWebChromeClient());
    }

然后看一下效果：

 

问题2：设置全屏后，视频不能播放

全屏按钮出来后，点击全屏，会调用 onShowCustomView() 方法。我们在这个方法中设置横屏的方法，即可实现全屏

    //设置横屏
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

但是我设置后，发现无法播放视频，只显示一个黑页面

查了下相关资料后，发现

public void onShowCustomView(View view, CustomViewCallback callback)

这个方法，在设置全屏后  会在参数 view  上显示播放的视频。所以，当设置全屏后，需要让这个view显示到最前方。

解决：我们可以在布局文件中，添加一个和webview 同级的 Framlaoyout ，用来存放这个视图

xml 文件：

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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" />

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</RelativeLayout >

WebChromeClient 具体实现

public class HelpActivity extends TitleBarActivity {

    private WebView webview = null;
    // h5 地址
    private String reurl = "";

    // 用来显示视频的布局
    private FrameLayout mLayout; 

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);
        mLayout = (FrameLayout) findViewById(R.id.fl_video);
        webview = (WebView) findViewById(R.id.webview);
        inieWebView();
     }

    /**
     * 设置webView 相关属性
     */

    private void initWebView() {
        WebSettings setting= webview.getSettings();
        setting.setJavaScriptEnabled(true);// 设置支持javascript脚本
        setting.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置缓存模式
        webview.setVerticalScrollBarEnabled(false); // 取消Vertical ScrollBar显示
        webview.setHorizontalScrollBarEnabled(false); // 取消Horizontal ScrollBar显示
        //设置自适应屏幕，两者合用
        setting.setUseWideViewPort(true);
        setting.setLoadWithOverviewMode(true);

        setting.setAllowFileAccess(true);// 允许访问文件
        setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            setting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        webview.setFocusable(false); // 去掉超链接的外边框
        setting.setDefaultTextEncodingName("GBK");//设置文本编码（根据页面要求设置）
        webview.setWebChromeClient(new MyWebChromeClient());
    }


private class MyWebChromeClient extends WebChromeClient {

        private CustomViewCallback mCustomViewCallback;
        //  横屏时，显示视频的view
        private View mCustomView;
         
        // 点击全屏按钮时，调用的方法
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            super.onShowCustomView(view, callback);

        //如果view 已经存在，则隐藏
            if (mCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }

            mCustomView = view;
            mCustomView.setVisibility(View.VISIBLE);
            mCustomViewCallback = callback;
            mLayout.addView(mCustomView);
            mLayout.setVisibility(View.VISIBLE);
            mLayout.bringToFront();

            //设置横屏
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }

        // 取消全屏调用的方法
        @Override
        public void onHideCustomView() {
            super.onHideCustomView();
            if (mCustomView == null) {
                return;
            }
            mCustomView.setVisibility(View.GONE);
            mLayout.removeView(mCustomView);
            mCustomView = null;
            mLayout.setVisibility(View.GONE);
            try {
                mCustomViewCallback.onCustomViewHidden();
            } catch (Exception e) {
            }
            titleView.setVisibility(View.VISIBLE);
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖屏
        }
    }
  /**
     * 横竖屏切换监听
     */
    @Override
    public void onConfigurationChanged(Configuration config) {
        super.onConfigurationChanged(config);
        switch (config.orientation) {
            case Configuration.ORIENTATION_LANDSCAPE:
                        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
                getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                break;
            case Configuration.ORIENTATION_PORTRAIT:
                getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
                break;
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        webview.destroy();
        webview = null;
    }

}

 还需要在 AndroidMainfest.xml  中设置该 Activity相关属性，即横竖屏切换的时候，不进行生命周期的切换

   <activity
            android:name=".HelpActivity"
            android:configChanges="orientation|keyboardHidden|navigation|screenSize"
            android:hardwareAccelerated="true"
            android:screenOrientation="portrait"
     />

到这里就大功告成！

还有一点需要注意： 当我们播放视频后，如果直接退出，会发现后台仍然在播放。

我们可以在 onDestory 方法中，对webView进行销毁