webview 加载h5页面，播放视频+全屏，实现简单封装

前段时间项目中用到了h5。从目前的市场来看，原生和h5的结合受到很多公司的欢迎，刚好最近微信也推出了它自己的“小程序”，这在Android程序员之间也掀起了波澜，引起大家讨论。

个人觉得Google提供的webview有很多的坑，我这次就踩了不少，比如在某些版本的系统上某个方法不会执行，或者执行的顺序不一样，有的方法会多执行一次，说白了就是兼容性做的很差，究其主要原因，是Android4.4前后webview 的内核发生了变化。那么Google难道没有发现这个问题？Google肯定发现了，那为什么还做的这么差劲呢，个人觉得有这么一个原因吧，Google想大力推广自己的Android，如果webview做的很好了，h5的应用势必会越来越广泛，势必会有很多不大的公司在一个app中更多的选择使用h5。因为它开发方便，维护成本更低，有了问题不用版本迭代，在后台直接就改了（这些是现在原生app面临的一大问题，但是有解决办法）。

下面就来说说我在这次webview开发中遇到的问题，和对webview的一个简单的封装。

首先上效果图：

下面主要说下实现的方法：

先需要一个webview，这个webview用来加载h5的页面，在半屏播放的时候也用这个webview，全屏的时候用一个framelayout,此时需要把webview隐藏了，xml的大概布局如下：

这儿其实还可以自定义一个404显示的view，在没网或者url加载失败的时候去显示，这样用户的体验效果要好一点。

接下来就是webview和fragmentlayout的获取

videoview = (FrameLayout) findViewById(R.id.video_view);
webview = (WebView) findViewById(R.id.webview);

下面就是webview的setting的一个设置了，在这里没什么好说的，建议大家一定要开启缓存。本人在这儿做的时候，在代码中通过判断sdk的版本，开启了硬件加速的功能，但是导致的原因是只有声音，没有图像，不设置webview的硬件加速就没问题，个人感觉主要和h5有很大的关系。

其次为了提高渲染的速度，建议大家可以开启gpu的渲染

getWindow().setFlags(//强制打开GPU渲染
				WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
				WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

接下来就是设置webview的视图

webview.setWebViewClient(new CustomWebViewClient());

我们在代码中自定义一个类CustomWebViewClient,主要实现其几个方法，实现对webview开始加载，加载完成，加载失败回调的处理

private final class CustomWebViewClient extends WebViewClient {
        //url加载失败
        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            super.onReceivedError(view, errorCode, description, failingUrl);
	    //做自己的一些处理，比如加载我们自定义的view或者给用户一个提示
        }
	//页面加载完成的时候调用
        @TargetApi(Build.VERSION_CODES.HONEYCOMB)
        @SuppressLint("NewApi")
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
	   //可以做一些加载完成的处理，比如隐藏正在加载的动画
        }
	//页面开始加载的时候调用
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
	  //可以做一些加载完成的处理，比如显示正在加载的动画
 } } 
  
 
  
 
  
 
  
 
  
最后就到视频播放了，视频全屏播放的时候需要用到一个类WebChromeClient,我们只要自定义一个类，去实现它里面的2个方法即可
 
  
 
  
/**
     * 处理Javascript的对话框、网站图标、网站标题以及网页加载进度等
     *
     * @author
     */
    public class xWebChromeClient extends WebChromeClient {
        private Bitmap xdefaltvideo;
        private View xprogressvideo;

        @Override
        // 播放网络视频时全屏会被调用的方法
        public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback) {
            if(a!=null){
                a.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
            }
            if(webview!=null){
                webview.setVisibility(View.GONE);
            }
            // 如果一个视图已经存在，那么立刻终止并新建一个
            if (xCustomView != null&&callback!=null) {
                callback.onCustomViewHidden();
                return;
            }
            if (view != null&&videoview!=null) {
                videoview.addView(view);
                xCustomView = view;
            }
            if(xCustomViewCallback!=null){
                xCustomViewCallback = callback;
            }
            if(videoview!=null){
                videoview.setVisibility(View.VISIBLE);
            }
        }

        @SuppressLint("NewApi")
        @Override
        // 视频播放退出全屏会被调用的
        public void onHideCustomView() {
            if (xCustomView == null||videoview==null)// 不是全屏播放状态
                return;
            videoview.removeView(xCustomView);
            if(a!=null){
                a.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            }
            xCustomView.setVisibility(View.GONE);
            xCustomView = null;
            videoview.setVisibility(View.GONE);
            if(xCustomViewCallback!=null){
                xCustomViewCallback.onCustomViewHidden();
            }
            if(webview!=null){
                webview.setVisibility(View.VISIBLE);
            }
            if(setting!=null){
                setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);// 排版适应屏幕
            }
        }

        // 视频加载添加默认图标
        @Override
        public Bitmap getDefaultVideoPoster() {
            if (xdefaltvideo == null) {
                xdefaltvideo = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
            }
            return xdefaltvideo;
        }
        // 视频加载时进程loading
        @SuppressLint("InflateParams")
        @Override
        public View getVideoLoadingProgressView() {
            if (xprogressvideo == null) {
                LayoutInflater inflater = LayoutInflater.from(a);
                xprogressvideo = inflater.inflate(R.layout.video_loading_progress, null);
            }
            return xprogressvideo;
        }

        // 网页标题
        @Override
        public void onReceivedTitle(WebView view, String title) {
            // a.setTitle(title)
            //view.getSettings().setBlockNetworkImage(false);
        }

        @Override
        // 当WebView进度改变时更新窗口进度
        public void onProgressChanged(WebView view, int newProgress) {
            a.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);
        }
    }
 
  
 
  提示：在全屏播放的activity上一定要加上android:configChanges="orientation|keyboardHidden|screenSize" 
  
到这儿视频播放也就差不多了，但是兼容性还是大问题，这儿就需要我们自己慢慢调了。在这儿我给大家推荐一个兼容性很好的webview框架，就是腾讯X5，我自己也下载的demo然后跑了一下，确实要比Google的webview牛掰了很多，目前在微信，QQ，QQ浏览器中解析h5都用的X5，这是他们自己写的内核，在兼容性，安全性，美观性上都有很大的提升。