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

来源：互联网发布：noppoo choc mac 编辑：程序博客网时间：2024/05/22 03:36

前段时间项目中用到了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的大概布局如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >        <FrameLayout            android:id="@+id/video_view"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:visibility="gone" >        </FrameLayout>        <WebView            android:id="@+id/webview"            android:layout_width="match_parent"            android:layout_height="match_parent"             /></RelativeLayout>

这儿其实还可以自定义一个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);<span style="white-space:pre"></span>    //做自己的一些处理，比如加载我们自定义的view或者给用户一个提示        }<span style="white-space:pre"></span>//页面加载完成的时候调用        @TargetApi(Build.VERSION_CODES.HONEYCOMB)        @SuppressLint("NewApi")        @Override        public void onPageFinished(WebView view, String url) {            super.onPageFinished(view, url);<span style="white-space:pre"></span>   //可以做一些加载完成的处理，比如隐藏正在加载的动画        }<span style="white-space:pre"></span>//页面开始加载的时候调用        @Override        public void onPageStarted(WebView view, String url, Bitmap favicon) {            super.onPageStarted(view, url, favicon);<pre name="code" class="java" style="font-size: 18px;"><span style="white-space:pre"></span>  //可以做一些加载完成的处理，比如显示正在加载的动画

} }

最后就到视频播放了，视频全屏播放的时候需要用到一个类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，这是他们自己写的内核，在兼容性，安全性，美观性上都有很大的提升。

3 0