背景
webView播放视频时候,会遇到一些问题,比如无法全屏播放视频等。解决方案有以下两种,这里着重介绍第二种解决方案。
- 实现一个网络视频播放器来播放网络视频(建议利用开源框架);
- 自定义WebView实现利用H5的Video标签来播放视频,可以解决基本的视频播放需求,但是一些效果难以实现;
手机中HTML5网页上点全屏后的效果。
一、启动硬件加速;
需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate。务必强制打开硬件加速,否则只有声音没有画面,因为在Android 5的部分rom上默认关闭硬件加速的,此时需要强制打开硬件加速。
方式一:声明整个应用都需要加速:
< application ... android:hardwareAccelerated ="true">
方式二:在Activity中声明:
<activity ... android:hardwareAccelerated="true" >
硬件加速配置好后,添加android:configChanges配置
webView所在的Activity添加如下配置,不添加无法全屏播放。
...android:configChanges="orientation|screenSize|keyboardHidden"...
权限记得添加
<uses-permission android:name="android.permission.INTERNET"></uses-permission>二、webView控件所在的xml文件内容<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mFrameLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/mWebView" android:layout_width="match_parent" android:layout_height="match_parent" /></FrameLayout>三、Activity中初始化webView
1.去掉标题,否则可能导致无法全屏;
2.初始布局中的两个控件;
3.webView一些简单初始化和配置,根据需求灵活修改;
class MyActivity extends Activity { ... private FrameLayout mFrameLayout; private WebView mWebView; private InsideWebChromeClient mInsideWebChromeClient; //private JavascriptInterface javascriptInterface; private String URL = "改成自己需要测试的H5网页"; @Override protected void onCreate(Bundle saveInstanceState) { // 1 requestWindowFeature(Window.FEATURE_NO_TITLE); // 2 mFrameLayout = (FrameLayout) findViewById(R.id.mFrameLayout); mWebView = (WebView) findViewById(R.id.mWebView); // 3 initWebView(); mWebView.loadUrl(URL); } private void initWebView() { WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true); settings.setJavaScriptCanOpenWindowsAutomatically(true); settings.setPluginState(WebSettings.PluginState.ON); //settings.setPluginsEnabled(true); settings.setAllowFileAccess(true); settings.setLoadWithOverviewMode(true); settings.setUseWideViewPort(true); settings.setCacheMode(WebSettings.LOAD_NO_CACHE); settings.setCacheMode(WebSettings.LOAD_DEFAULT); mInsideWebChromeClient = new InsideWebChromeClient(); InsideWebViewClient mInsideWebViewClient = new InsideWebViewClient(); //javascriptInterface = new JavascriptInterface(); //mWebView.addJavascriptInterface(javascriptInterface, "java2js_laole918"); mWebView.setWebChromeClient(mInsideWebChromeClient); mWebView.setWebViewClient(mInsideWebViewClient); } }四、自定义WebChromeClient类
步骤三种mInsideWebChromeClient = new InsideWebChromeClient();初始化的是自定义的WebChromeClient类,这里就开始创建该类
思路:在onShowCustomView方法中,讲获取到的view放到当前Activity的最上方,在onHideCustomView中,将之前的view隐藏或者删除,将原来被覆盖的webview放回来。并结束播放。
public Class MyActivity extends Activity { ... private class InsideWebChromeClient extends WebChromeClient { private View mCustomView; private CustomViewCallback mCustomViewCallback; @Override public void onShowCustomView(View view, CustomViewCallback callback) { super.onShowCustomView(view, callback); if (mCustomView != null) { callback.onCustomViewHidden(); return; } mCustomView = view; mFrameLayout.addView(mCustomView); mCustomViewCallback = callback; mWebView.setVisibility(View.GONE); setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); } public void onHideCustomView() { mWebView.setVisibility(View.VISIBLE); if (mCustomView == null) { return; } mCustomView.setVisibility(View.GONE); mFrameLayout.removeView(mCustomView); mCustomViewCallback.onCustomViewHidden(); mCustomView = null; setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); super.onHideCustomView(); } } ... }五、自定义WebViewClient,在Activity内部类。
重写WebViewClient在onPageFinished()方法中可以注入JS语句。按需求添加。
... private class InsideWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // TODO Auto-generated method stub view.loadUrl(url); return true; } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); //mWebView.loadUrl(javascript); } } ...六、在Activity中复写onConfigurationChanged方法...@Overridepublic void onConfigurationChanged(Configuration config) { super.onConfigurationChanged(config); switch (config.orientation) { case Configuration.ORIENTATION_LANDSCAPE: getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); break; case Configuration.ORIENTATION_PORTRAIT: getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); break; } }七、Activity声明周期内webView的操作...@Overridepublic void onPause() { super.onPause(); mWebView.onPause(); }@Overridepublic void onResume() { super.onResume(); mWebView.onResume(); }@Overridepublic void onBackPressed() { if (mWebView.canGoBack()) { mWebView.goBack(); return; } super.onBackPressed(); }@Overridepublic void onDestroy() { mWebView.destroy(); super.onDestroy(); } ...
思路:在onShowCustomView方法中,讲获取到的view放到当前Activity的最上方,在onHideCustomView中,将之前的view隐藏或者删除,将原来被覆盖的webview放回来。并结束播放。
八、没有正确全屏可能的原因
点击全屏按钮后,宽度拉宽了,高度也高了,但是可以上下滑动,看起来像是一个横屏的网页,这是伪全屏。
1.检查AndroidManifest.xml清单文件,WebView控件所在的Activity配置信息是否添加android:configChanges或者是否orientation,screenSize,keyboardHidden写全了。我之前就是忘记写了个screenSize参数,点击视频全屏按钮后,是一个伪全屏。还可以上下滑动呢。
## 犯错的错误写成了如下:android:configChanges="orientation|keyboardHidden" -->## 正确的写法:android:configChanges="orientation|screenSize|keyboardHidden"
2.检查Activity的主题是否NoActionBar了。
小技巧:html5测试的URL获取
打开搜狐,播放一个视频,查看源代码,查找以下代码,url就是html5。
<meta name="mobile-agent" content="format=html5;url=http://m.tv.sohu.com/20140508/n399272261.shtml">最后
不懂得可以简书私信我,我会在第一时间回复。
登录 | 立即注册