Android Webview 騰訊TBS X5 瀏覽器核心接入-解決低版本android手機無法相容某些H5導致白屏的問題
所有的頁面跳轉，都在一個webView中，各種第三方的跳轉，視訊播放，分享等等功能！真是叫人頭大！尤其是視訊播放這塊，要整成橫向的全屏模式，試了各種方法，總是豎屏！於是想起之前看到的一個部落格說是騰訊的遊覽器核心SDK是免費提供的，到網上一查，它提供的功能確實滿足！尤其是在載入視訊的時候，會載入它自己的解碼器，播放器的介面也蠻好看的！接下來，大家就懂了！先做一個demo試試唄！
開始擼程式碼！
官方下載地址： https://x5.tencent.com/tbs/sdk.html
注：你下載的SDK可能不是含有*.so檔案，所以最好也再下載一個demo。
第一步，新增jar包：
第二步，配置你的Application檔案：
第三步，新增相關的so包：
由於X5只提供了一個so包，所以對應的相關CPU架構包都拷貝一個進去！（64位的架構也對應的這個so包！不明白的可以到官網看解釋！）
第四步，新增build.gradle配置：
第五步，把demo中簡單封裝的webView匯入工程（當然，你也可以直接用jar包中的）：
package com.example.administrator.testh5.utils;
import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.os.Build; import android.util.AttributeSet; import android.view.View; import android.widget.TextView;
import com.tencent.smtt.sdk.QbSdk; import com.tencent.smtt.sdk.WebSettings; import com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm; import com.tencent.smtt.sdk.WebView; import com.tencent.smtt.sdk.WebViewClient;
public class X5WebView extends WebView { TextView title; private WebViewClient client = new WebViewClient() { /** * 防止載入網頁時調起系統瀏覽器 */ public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } };
@SuppressLint("SetJavaScriptEnabled") public X5WebView(Context arg0, AttributeSet arg1) { super(arg0, arg1); this.setWebViewClient(client); // this.setWebChromeClient(chromeClient); // WebStorage webStorage = WebStorage.getInstance(); initWebViewSettings(); this.getView().setClickable(true); }
private void initWebViewSettings() { WebSettings webSetting = this.getSettings(); webSetting.setJavaScriptEnabled(true); webSetting.setJavaScriptCanOpenWindowsAutomatically(true); webSetting.setAllowFileAccess(true); webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); webSetting.setSupportZoom(true); webSetting.setBuiltInZoomControls(true); webSetting.setUseWideViewPort(true); webSetting.setSupportMultipleWindows(true); // webSetting.setLoadWithOverviewMode(true); webSetting.setAppCacheEnabled(true); // webSetting.setDatabaseEnabled(true); webSetting.setDomStorageEnabled(true); webSetting.setGeolocationEnabled(true); webSetting.setAppCacheMaxSize(Long.MAX_VALUE); // webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY); webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND); // webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH); webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
// this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension // settings 的設計 }
@Override protected boolean drawChild(Canvas canvas, View child, long drawingTime) { boolean ret = super.drawChild(canvas, child, drawingTime); canvas.save(); Paint paint = new Paint(); paint.setColor(0x7fff0000); paint.setTextSize(24.f); paint.setAntiAlias(true); if (getX5WebViewExtension() != null) { canvas.drawText(this.getContext().getPackageName() + "-pid:" + android.os.Process.myPid(), 10, 50, paint); canvas.drawText( "X5 Core:" + QbSdk.getTbsVersion(this.getContext()), 10, 100, paint); } else { canvas.drawText(this.getContext().getPackageName() + "-pid:" + android.os.Process.myPid(), 10, 50, paint); canvas.drawText("Sys Core", 10, 100, paint); } canvas.drawText(Build.MANUFACTURER, 10, 150, paint); canvas.drawText(Build.MODEL, 10, 200, paint); canvas.restore(); return ret; }
public X5WebView(Context arg0) { super(arg0); setBackgroundColor(85621); }
} 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
第六步，介面展示叻：
package com.example.administrator.testh5;
import android.content.res.Configuration; import android.graphics.PixelFormat; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.webkit.JavascriptInterface; import android.widget.FrameLayout; import android.widget.Toast;
import com.example.administrator.testh5.utils.WebViewJavaScriptFunction; import com.example.administrator.testh5.utils.X5WebView; import com.tencent.smtt.export.external.interfaces.IX5WebChromeClient; import com.tencent.smtt.export.external.interfaces.JsResult; import com.tencent.smtt.sdk.WebChromeClient; import com.tencent.smtt.sdk.WebView;
public class MainActivity extends AppCompatActivity { private WebView mWebView;
String url="http://learn.clponline.cn/learnspace/sign/signLearn.action?params.template=2&loginType=true&sign=mobile&courseId=ff8080815b00afa0015b061aa9cd0269&siteCode=puhsc&domain=jy.clponline.cn&loginId=studentljx";
// String url="https://jinmingli.webtrn.cn/whaty-jwplayer/demo1.html"; /** * 用於演示X5webview實現視訊的全屏播放功能 其中注意 X5的預設全屏方式 與 android 系統的全屏方式 */
X5WebView webView;
@Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.filechooser_layout); webView = (X5WebView) findViewById(R.id.web_filechooser); webView.loadUrl(url); getWindow().setFormat(PixelFormat.TRANSLUCENT);
webView.getView().setOverScrollMode(View.OVER_SCROLL_ALWAYS); webView.addJavascriptInterface(new MyJs(), "android"); webView.setWebChromeClient(new WebChromeClient());
}
public class MyJs{
@JavascriptInterface public String back(){
enableX5FullscreenFunc(); Toast.makeText(MainActivity.this,"js呼叫android成功！",Toast.LENGTH_SHORT).show();
System.out.println("kkkkkkkkkkkkk");
return "android!"; }
}
@Override public void onConfigurationChanged(Configuration newConfig) { // TODO Auto-generated method stub try { super.onConfigurationChanged(newConfig); if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
} else if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
} } catch (Exception e) { e.printStackTrace(); }
}
// ///////////////////////////////////////// // 向webview發出資訊 private void enableX5FullscreenFunc() {
if (webView.getX5WebViewExtension() != null) { Toast.makeText(this, "開啟X5全屏播放模式", Toast.LENGTH_LONG).show(); Bundle data = new Bundle();
data.putBoolean("standardFullScreen", false);// true表示標準全屏，false表示X5全屏；不設定預設false，
data.putBoolean("supportLiteWnd", false);// false：關閉小窗；true：開啟小窗；不設定預設true，
data.putInt("DefaultVideoScreen", 2);// 1：以頁面內開始播放，2：以全屏開始播放；不設定預設：1
webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams", data); } }
private void disableX5FullscreenFunc() { if (webView.getX5WebViewExtension() != null) { Toast.makeText(this, "恢復webkit初始狀態", Toast.LENGTH_LONG).show(); Bundle data = new Bundle();
data.putBoolean("standardFullScreen", true);// true表示標準全屏，會調起onShowCustomView()，false表示X5全屏；不設定預設false，
data.putBoolean("supportLiteWnd", false);// false：關閉小窗；true：開啟小窗；不設定預設true，
data.putInt("DefaultVideoScreen", 2);// 1：以頁面內開始播放，2：以全屏開始播放；不設定預設：1
webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams", data); } }
private void enableLiteWndFunc() { if (webView.getX5WebViewExtension() != null) { Toast.makeText(this, "開啟小窗模式", Toast.LENGTH_LONG).show(); Bundle data = new Bundle();
data.putBoolean("standardFullScreen", false);// true表示標準全屏，會調起onShowCustomView()，false表示X5全屏；不設定預設false，
data.putBoolean("supportLiteWnd", true);// false：關閉小窗；true：開啟小窗；不設定預設true，
data.putInt("DefaultVideoScreen", 2);// 1：以頁面內開始播放，2：以全屏開始播放；不設定預設：1
webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams", data); } }
private void enablePageVideoFunc() { if (webView.getX5WebViewExtension() != null) { Toast.makeText(this, "頁面內全屏播放模式", Toast.LENGTH_LONG).show(); Bundle data = new Bundle();
data.putBoolean("standardFullScreen", false);// true表示標準全屏，會調起onShowCustomView()，false表示X5全屏；不設定預設false，
data.putBoolean("supportLiteWnd", false);// false：關閉小窗；true：開啟小窗；不設定預設true，
data.putInt("DefaultVideoScreen", 1);// 1：以頁面內開始播放，2：以全屏開始播放；不設定預設：1
webView.getX5WebViewExtension().invokeMiscMethod("setVideoParams", data); } }
} 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
注：下面提供的幾個方法，是控制webView中視訊的窗體的，如果點選直接播放就可以直接初始化webView後，直接新增即可！
還需注意的是AndroidManifest.xml中，開啟硬體加速：
<!-- 硬體加速對X5視訊播放非常重要，建議開啟 --> <uses-permission android:name="android.permission.GET_TASKS" />12
對應的Activity的configChanges設定：
android:configChanges="orientation|screenSize|keyboardHidden"1
到這，基本這個工程就跑起來了！並且能整成的播放，全屏和半屏播放了！
接下來，總結一下整合過程中遇到的坑：
1.如果你在Application中的初始化總是返回：false。那可能是這幾種情況：
a.仔細檢查，你的jar包是否匯入，so檔案是否加入 b.看看你的build.gradle，是否配置了ndk c.檢查你的測試機是否安裝了QQ或者微信或者QQ瀏覽器（需要共享X5核心） d.如果上幾步都沒有問題，建議重新啟動一下開發環境（我就是這種情況（原因不明）） 1234
2.處理左上角的除錯資訊
找到X5WebView，註釋這個方法中的內容：
3.適配 如果你是跟我一樣，在主選單介面開始播放，當開始全屏播放的時候，選單欄會戰部分介面， 導致無法全屏，進過測試，android 7.0以下的，你呼叫onConfigurationChanged進行選單的隱藏顯示就OK的，但是android 7.0以及android7.0以上的是不會走這個方法的，但是sdk也並沒有提供監聽全屏的介面（可能我沒有找到），我的處理方法是定時器判斷webView的高度和寬度進行選單的隱藏個和顯示（很土的解決方案，我自己都鄙視我自己）！
OK，基本就到了，今天為止，就搞了一天，可能有些api還不是很熟悉！有好的建議和方法歡迎交流！謝謝！
Demo GitHub地址： https://github.com/T-chuangxin/TbsTestH5Demo
原文：https://blog.csdn.net/qq_25497621/article/details/78561357