本篇目錄
背景
webView播放視頻時(shí)候挫剑，會(huì)遇到一些問題否淤，比如無法全屏播放視頻等。解決方案有以下兩種涯塔，這里著重介紹第二種解決方案鹤啡。
- 實(shí)現(xiàn)一個(gè)網(wǎng)絡(luò)視頻播放器來播放網(wǎng)絡(luò)視頻（建議利用開源框架）；
- 自定義WebView實(shí)現(xiàn)利用H5的Video標(biāo)簽來播放視頻蹲嚣，可以解決基本的視頻播放需求递瑰，但是一些效果難以實(shí)現(xiàn)；
手機(jī)中HTML5網(wǎng)頁上點(diǎn)全屏后的效果隙畜。
一抖部、啟動(dòng)硬件加速；
需要在AndroidManifest.xml文件中聲明需要使用HardwareAccelerate议惰。務(wù)必強(qiáng)制打開硬件加速慎颗，否則只有聲音沒有畫面，因?yàn)樵贏ndroid 5的部分rom上默認(rèn)關(guān)閉硬件加速的言询，此時(shí)需要強(qiáng)制打開硬件加速俯萎。
方式一：聲明整個(gè)應(yīng)用都需要加速：
< application ... android:hardwareAccelerated ="true">
方式二：在Activity中聲明：
<activity ... android:hardwareAccelerated="true" >
硬件加速配置好后，添加android:configChanges配置
webView所在的Activity添加如下配置运杭，不添加無法全屏播放夫啊。
...
android:configChanges="orientation|screenSize|keyboardHidden"
...
權(quán)限記得添加
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
二、webView控件所在的xml文件內(nèi)容
<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.去掉標(biāo)題撇眯，否則可能導(dǎo)致無法全屏；
2.初始布局中的兩個(gè)控件虱咧；
3.webView一些簡單初始化和配置熊榛，根據(jù)需求靈活修改；
class MyActivity extends Activity {
...
private FrameLayout mFrameLayout;
private WebView mWebView;
private InsideWebChromeClient mInsideWebChromeClient;
//private JavascriptInterface javascriptInterface;
private String URL = "改成自己需要測試的H5網(wǎng)頁";
@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類玄坦，這里就開始創(chuàng)建該類
思路：在onShowCustomView方法中，講獲取到的view放到當(dāng)前Activity的最上方绘沉，在onHideCustomView中营搅，將之前的view隱藏或者刪除，將原來被覆蓋的webview放回來梆砸。并結(jié)束播放转质。
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內(nèi)部類帖世。
重寫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中復(fù)寫onConfigurationChanged方法
...
@Override
public 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聲明周期內(nèi)webView的操作
...
@Override
public void onPause() {
super.onPause();
mWebView.onPause();
}
@Override
public void onResume() {
super.onResume();
mWebView.onResume();
}
@Override
public void onBackPressed() {
if (mWebView.canGoBack()) {
mWebView.goBack();
return;
}
super.onBackPressed();
}
@Override
public void onDestroy() {
mWebView.destroy();
super.onDestroy();
}
...
思路：在onShowCustomView方法中绑榴，講獲取到的view放到當(dāng)前Activity的最上方，在onHideCustomView中盈魁，將之前的view隱藏或者刪除翔怎，將原來被覆蓋的webview放回來。并結(jié)束播放杨耙。
八赤套、沒有正確全屏可能的原因
點(diǎn)擊全屏按鈕后，寬度拉寬了珊膜，高度也高了容握，但是可以上下滑動(dòng)，看起來像是一個(gè)橫屏的網(wǎng)頁车柠，這是偽全屏剔氏。
1.檢查
AndroidManifest.xml清單文件，WebView控件所在的Activity配置信息是否添加android:configChanges或者是否orientation,screenSize,keyboardHidden寫全了竹祷。我之前就是忘記寫了個(gè)screenSize參數(shù)谈跛，點(diǎn)擊視頻全屏按鈕后，是一個(gè)偽全屏塑陵。還可以上下滑動(dòng)呢币旧。
## 犯錯(cuò)的錯(cuò)誤寫成了如下：
android:configChanges="orientation|keyboardHidden" -->
## 正確的寫法：
android:configChanges="orientation|screenSize|keyboardHidden"
2.檢查Activity的主題是否NoActionBar了。
小技巧：html5測試的URL獲取
打開搜狐猿妈，播放一個(gè)視頻吹菱，查看源代碼，查找以下代碼彭则，url就是html5鳍刷。
<meta name="mobile-agent" content="format=html5;url=http://m.tv.sohu.com/20140508/n399272261.shtml">
最后
不懂得可以簡書私信我，我會(huì)在第一時(shí)間回復(fù)俯抖。
