android webview全屏视频,Android WebView中HTML5视频全屏的实现

项目中遇到的问题，activity中有webview控件来加载对应的HTML5网页，其中视频可以正常播放，但是当点击全屏时会出现有声音但是画面卡住的异常现象。结合网上前辈的代码片段，自己也尝试了下改进下，终于解决。

实现全屏需要复写WebChromeClient两个回调方法，其中关键就是WebView控件的父节点Layout需要实例化，并在两个回调方法中对WebView进行remove和add，即ViewGroup对View的remove和add操作。

关键代码如下，其中注意onPause()和onResume中对于Activity处于pause和resume状态下媒体暂停和继续播放的处理，还有onKeyUp()和onBackPressed()对于全屏状态下点击back键的处理：

public class TestActivity extends Activity {

private MyWebView mWebView;

private RelativeLayout rl_footLayout;

private View myView = null;

private CustomViewCallback myCallback = null;

private MyWebChromeClient myChromeClient;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main_activity);

rl_footLayout = (RelativeLayout) findViewById(R.id.layout_interactive_detail);

mWebView = (MyWebView) findViewById(R.id.interactive_activity_mywebview);

}

@Override

protected void onDestroy() {

super.onDestroy();

if (mWebView != null) {

mWebView.setVisibility(View.GONE);

mWebView.destroy();

}

}

@Override

protected void onResume() {

super.onResume();

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB) {

try {

mWebView.getClass().getMethod("onResume")

.invoke(mWebView, (Object[]) null);

} catch (IllegalArgumentException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} catch (IllegalAccessException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} catch (InvocationTargetException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} catch (NoSuchMethodException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}

private void loadUrl(String Url) {

if (TextUtils.isEmpty(Url)) {

Url = "http://www.xxx.com";

}

mWebView.loadUrl(Url);

mWebView.addJavascriptInterface(new ProxyBridge(this), "ClientProxy");

myChromeClient = new MyWebChromeClient();

mWebView.setWebChromeClient(myChromeClient);

}

@Override

public boolean onKeyUp(int keyCode, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_BACK) {

if (mWebView.canGoBack()) {

this.onBackPressed();

if (myView != null) {

mWebView.goBack();

}

} else {

return super.onKeyUp(keyCode, event);

}

return true;

}

return super.onKeyUp(keyCode, event);

}

@Override

protected void onPause() {

super.onPause();

// TODO Auto-generated method stub

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB) {

try {

mWebView.getClass().getMethod("onPause")

.invoke(mWebView, (Object[]) null);

} catch (IllegalArgumentException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} catch (IllegalAccessException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} catch (InvocationTargetException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} catch (NoSuchMethodException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}

/**

* 复写该类两个方法，使HTML5上视频可以全屏播放

*

* @author wwei

*

*/

private class MyWebChromeClient extends WebChromeClient {

@Override

public void onHideCustomView() {

// TODO Auto-generated method stub

// super.onHideCustomView();

if (myView == null) {

return;

}

rl_footLayout.removeView(myView);

rl_footLayout.addView(mWebView);

quitFullScreen();

myView = null;

myCallback.onCustomViewHidden();

}

@Override

public void onShowCustomView(View view, CustomViewCallback callback) {

// TODO Auto-generated method stub

// super.onShowCustomView(view, callback);

if (myView != null) {

callback.onCustomViewHidden();

return;

}

RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(

RelativeLayout.LayoutParams.MATCH_PARENT,

RelativeLayout.LayoutParams.WRAP_CONTENT);

layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);

view.setLayoutParams(layoutParams);

enterFullScreen();

rl_footLayout.removeView(mWebView);

rl_footLayout.addView(view);

myView = view;

myCallback = callback;

}

}

@Override

public void onBackPressed() {

if (myView == null) {

super.onBackPressed();

} else {

myChromeClient.onHideCustomView();

}

}

private void enterFullScreen() {

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,

WindowManager.LayoutParams.FLAG_FULLSCREEN);

}

private void quitFullScreen() {

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

WindowManager.LayoutParams attrs = getWindow().getAttributes();

attrs.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);

getWindow().setAttributes(attrs);

getWindow()

.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

}

}