Android WebView 总结 —— 使用HTML5播放视频及全屏方案

在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频。

1.让视频在各个Android版本能够正常播放

在AndroidManifest.xml中声明HardwareAccelerate的标志,一般是添加在Activity的级别上。代码如下:
<activity ... android:hardwareAccelerated="true" >

下面引申一下HardwareAccelerate声明的方式:

(a).如果需要声明整个应用都要加速,则在Application级别下面进行声明:

< application ... android:hardwareAccelerated ="true">

(b).如果需要某个Activity加速,则可以进行下面的声明:

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

或者在代码里面进行动态的声明:

getWindow.setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

(c).如果Application和Activity都声明了HardwareAccelerate,但是由于某些特殊原因,一些View不需要硬件加速,那么在View里面设置:

view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

完成声明操作后,基本上WebView就能够很好的支持在页面上播放视频了,下面展示的是在Html上的Viedeo的声明方法:

<!DOCTYPE html>
<html>
<body>
<video width="305" height="305" controls="controls" preload="none" poster="http://****.png" >
<source src="http://*****.mp4" type="video/mp4">
</video>
</body>
</html>

2. 视频播放的时候能够全屏

视频能播放,那么如何支持视频全屏播放呢? 下面是针对全屏播放网页视频提供的解决办法:

public class WebVideoActivity extends Activity {

    private WebView webView;

    /** 视频全屏参数 */
protected static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
private View customView;
private FrameLayout fullscreenContainer;
private WebChromeClient.CustomViewCallback customViewCallback; @Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
setContentView(R.layout.activity_xx);
webView = (WebView) findViewById(R.id.xx);
initWebView();
} @Override
protected void onStop() {
super.onStop();
webView.reload();
} /** 展示网页界面 **/
  public void initWebView() {
WebChromeClient wvcc = new WebChromeClient();
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true); // 关键点
webSettings.setAllowFileAccess(true); // 允许访问文件
webSettings.setSupportZoom(true); // 支持缩放
webSettings.setLoadWithOverviewMode(true);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 不加载缓存内容 webView.setWebChromeClient(wvcc);
WebViewClient wvc = new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
webView.loadUrl(url);
return true;
}
};
webView.setWebViewClient(wvc); webView.setWebChromeClient(new WebChromeClient() { /*** 视频播放相关的方法 **/ @Override
public View getVideoLoadingProgressView() {
FrameLayout frameLayout = new FrameLayout(WebVideoActivity.this);
frameLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
return frameLayout;
} @Override
public void onShowCustomView(View view, CustomViewCallback callback) {
showCustomView(view, callback);
} @Override
public void onHideCustomView() {
hideCustomView();
}
}); // 加载Web地址
webView.loadUrl(webUrl);
} /** 视频播放全屏 **/
private void showCustomView(View view, CustomViewCallback callback) {
// if a view already exists then immediately terminate the new one
if (customView != null) {
callback.onCustomViewHidden();
return;
} WebVideoActivity.this.getWindow().getDecorView(); FrameLayout decor = (FrameLayout) getWindow().getDecorView();
fullscreenContainer = new FullscreenHolder(WebVideoActivity.this);
fullscreenContainer.addView(view, COVER_SCREEN_PARAMS);
decor.addView(fullscreenContainer, COVER_SCREEN_PARAMS);
customView = view;
setStatusBarVisibility(false);
customViewCallback = callback;
} /** 隐藏视频全屏 */
private void hideCustomView() {
if (customView == null) {
return;
} setStatusBarVisibility(true);
FrameLayout decor = (FrameLayout) getWindow().getDecorView();
decor.removeView(fullscreenContainer);
fullscreenContainer = null;
customView = null;
customViewCallback.onCustomViewHidden();
webView.setVisibility(View.VISIBLE);
} /** 全屏容器界面 */
static class FullscreenHolder extends FrameLayout { public FullscreenHolder(Context ctx) {
super(ctx);
setBackgroundColor(ctx.getResources().getColor(android.R.color.black));
} @Override
public boolean onTouchEvent(MotionEvent evt) {
return true;
}
} private void setStatusBarVisibility(boolean visible) {
int flag = visible ? 0 : WindowManager.LayoutParams.FLAG_FULLSCREEN;
getWindow().setFlags(flag, WindowManager.LayoutParams.FLAG_FULLSCREEN);
} @Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
switch (keyCode) {
case KeyEvent.KEYCODE_BACK:
/** 回退键 事件处理 优先级:视频播放全屏-网页回退-关闭页面 */
if (customView != null) {
hideCustomView();
} else if (webView.canGoBack()) {
webView.goBack();
} else {
finish();
}
return true;
default:
return super.onKeyUp(keyCode, event);
}
}
}

在onShowCustomView方法中,将获取到的view放到当前Activity的最上方,在onHideCustomView中,将之前的view隐藏或者删除,将原来被覆盖的webview放回来。

上一篇:HTML5播放视频,并使用ffmpeg对视频转编码


下一篇:自定义策略-简单实践 <一>