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的大概布局如下：

<?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，这是他们自己写的内核，在兼容性，安全性，美观性上都有很大的提升。