X5内核 腾讯SDK 全攻略

作者: 喜欢丶下雨天 | 来源:发表于2017-08-22 15:11 被阅读569次

接入

这是官网接入文档入口

开始搬砖

  • 集成准备工作:
  1. 先把tbs_sdk... 还有一个liblbs.os文件放到你自己的项目里。sdk放在libs下,然后liblbs.os文件在java文件平级的jniLibs文件里。那么好,第一个坑来了,下载的sdk里根本就没有liblbs.os文件,官方的文档里也没告诉你在哪。不卖关子了,这个文件你得下他们的demo然后把demo里jniLibs里的东西拷贝到你自己的项目里。
  2. 然后我个人比较喜欢把.so文件也放在libs里,这里只需要在module下的build.gradle的android{...}里配置
sourceSets {
        main {
            jniLibs.srcDirs = ['libs']
        }
    }
  1. 官方的demo里jniLibs下只有一个armeabi文件夹,这样我们只能在arm cpu的手机上有用还有大量的手机并没有效果。所以接下来需要适配所有的机型。
    解决办法:
libs.png

如图,把其他的cpu目录都创建出来,然后把原liblbs.so文件一次放在各个目录下。然后在对应module中的build.gradle文件,在文件的android{}中的defaultConfig{}里(如果没有defaultConfig{}则手动添加)添加如下配置:

ndk {
            //选择要添加的对应cpu类型的.so库。
            abiFilters 'armeabi', 'armeabi-v7a', 'armeabi-v8a', 'x86', 'x86_64', 'mips', 'mips64'
        }

如果配置后编译报错,那么需要在gradle.properties文件中加上Android.useDeprecatedNdk=true。

  1. 添加权限:
    这个很常规但是不要忘了。
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
  1. 初次打开页面的时候,会有白屏,时间依据手机情况有不同,这是因为X5内核需要一个初始化的过程。官方给出了一个解决方案:

App 在启动后(例如在 Application 的 onCreate 中)立刻调用 QbSdk 的预加载接口 initX5Environment.
需要注意的是: 当本地没有宿主x5内核可用,此时需要在wifi条件下下载x5内核(23M左右,耗时90秒左右),如果在此之前打开webview可能导致无内核可用而使用系统内核的情况

看代码(在Application里):

 @Override
    public void onCreate() {
        super.onCreate();
        //搜集本地tbs内核信息并上报服务器,服务器返回结果决定使用哪个内核。
        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {

            @Override
            public void onViewInitFinished(boolean arg0) {
                // TODO Auto-generated method stub
                //x5內核初始化完成的回调,为true表示x5内核加载成功,否则表示x5内核加载失败,会自动切换到系统内核。
                Log.d("app", " onViewInitFinished is " + arg0);
            }

            @Override
            public void onCoreInitFinished() {
                // TODO Auto-generated method stub
            }
        };
        //x5内核初始化接口
        QbSdk.initX5Environment(getApplicationContext(), cb);
    }

如果你没有需要回调的需求,cb可以填null。(个人感觉还是会白屏一段时间)
解释一下后面那句需要注意的:就是说你手机上有没有类似微信,手机QQ,QQ浏览器之类的集成了x5内核的应用,而且你之前还要在这些应用里打开过网页,不然就会去下载x5内核。

  1. 在简书陈小平的一篇文章里,提出:集成X5后,项目编译变慢了,如果项目太大的话,还不容易跑起来。然后作者也给出解决办法:在主module的build.gradle里面加上下面这段代码
dexOptions {
    javaMaxHeapSize "4g"
    preDexLibraries = false
}

到这里基本的准备工作以及做完了。

代码

xml文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/frame_web_video"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.tencent.smtt.sdk.WebView
        android:id="@+id/web_filechooser"
        android:layout_width="fill_parent"
        android:layout_height="match_parent">

    </com.tencent.smtt.sdk.WebView>

</RelativeLayout>

java:

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getWindow().setFormat(PixelFormat.TRANSLUCENT);
        setContentView(R.layout.filechooser_layout);
        mWebView = (com.tencent.smtt.sdk.WebView) findViewById(R.id.web_filechooser);
        //一些初始化配置
        initWebViewSettings();
        mWebView.loadUrl("http://res.ky-express.com/h5/video/72.html");
        mWebView.getView().setClickable(true);
    }

这样基本上就可以正常运行了,用的就是腾讯浏览服务。

其他问题

  • 视频全屏问题:
    在有视频播放的html里,上面的代码可以播放视频但是当你想全屏看的时候就不行了,出问题了。你需要加如下代码:
// 播放视频
        Bundle data = new Bundle();
        data.putBoolean("standardFullScreen", false);
        data.putBoolean("supportLiteWnd", true);
        data.putInt("DefaultVideoScreen", 1);
        mWebView.getX5WebViewExtension().invokeMiscMethod("setVideoParams", data);

对参数做个简要说明,standardFullScreen 是标准全屏还是x5全屏,如果true就是标准全屏,false就是x5全屏,不设置默认为false。这里需要注意如果设置是true,会回调WebChromeClient的onShowCustomView方法,由开发者自己实现全屏展示。提供一点事例代码,回头会上传demo。

 mWebView.setWebChromeClient(new WebChromeClient() {

            @Override
            public boolean onJsConfirm(WebView arg0, String arg1, String arg2,
                                       JsResult arg3) {
                return super.onJsConfirm(arg0, arg1, arg2, arg3);
            }

            View myVideoView;
            View myNormalView;
            IX5WebChromeClient.CustomViewCallback callback;
            /**
             * 全屏播放配置
             */
            @Override
            public void onShowCustomView(View view,
                                         IX5WebChromeClient.CustomViewCallback customViewCallback) {
                FrameLayout normalView = (FrameLayout) findViewById(R.id.frame_web_video);
                ViewGroup viewGroup = (ViewGroup) normalView.getParent();
                viewGroup.removeView(normalView);
                viewGroup.addView(view, new FrameLayout.LayoutParams(
                        FrameLayout.LayoutParams.FILL_PARENT,
                        FrameLayout.LayoutParams.FILL_PARENT));
                myVideoView = view;
                myNormalView = normalView;
                callback = customViewCallback;
            }

            @Override
            public void onHideCustomView() {
                if (callback != null) {
                    callback.onCustomViewHidden();
                    callback = null;
                }
                if (myVideoView != null) {
                    ViewGroup viewGroup = (ViewGroup) myVideoView.getParent();
                    viewGroup.removeView(myVideoView);
                    viewGroup.addView(myNormalView);
                }
            }

            @Override
            public boolean onJsAlert(WebView arg0, String arg1, String arg2,
                                     JsResult arg3) {
                /**
                 * 这里写入你自定义的window alert
                 */
                return super.onJsAlert(null, arg1, arg2, arg3);
            }
        });

里面最关键的就是onShowCustomView()里的全屏播放设置,推荐使x5全屏。
全屏属性设置为false时,由我们实现全屏展示,我们实现全屏展示需要满足下面两个条件:
a. 我们 Webview初始化的Context必须是Activity类型的Context
b. 我们 Webview 所在的Activity要声明这个属性
android:configChanges="orientation|screenSize|keyboardHidden"
supportLiteWnd false的时候是关闭小窗模式,true的时候是开启小窗模式,不设置默认为true,前提standardFullScreen=false,也就是得设置x5全屏这个条件才生效。
DefaultVideoScreen 1:以页面内开始播放,2:以全屏开始播放;不设置默认:1。
这段视频播放的代码设置完了,可以全屏播放了,没有问题。

  • 视频播放小窗模式
    为什么要单独拎出来,因为这里有一个巨坑。前面的代码已经设置好了小窗模式,但是我在运行的过程中发现,视频小窗模式的效果没有出来,也没有任何提示。然后我去运行官方的demo然而也没有效果也没有一点提示,这就很难过了。官方demo里专门有一个视频模式的模块,然而并不行。最后经历了一些坎坷,最终发现了是什么原因。不卖关子了,原来小窗模式要有效果,你手机里必须安装了QQ浏览器,这个小窗模式是通过QQ浏览器支持的,装了QQ浏览器之后就没问题了。

  • 去除全屏模式下QQ浏览器的推广
    在使用到X5 Webview的那个Activity里面加上这段代码:

//去除QQ浏览器推广
getWindow().getDecorView().addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                ArrayList<View> outView = new ArrayList<View>();
                getWindow().getDecorView().findViewsWithText(outView, "QQ浏览器", View.FIND_VIEWS_WITH_TEXT);
                int size = outView.size();
                if (outView != null && outView.size() > 0) {
                    outView.get(0).setVisibility(View.GONE);
                }
            }
        });

代码下载

直接导到AS的module里

======补充======

如果webview有视频全屏需求,在有webview控件的那个activity里一定加上

android:configChanges="orientation|screenSize|keyboardHidden"

相关文章

网友评论

  • 840d8997ee93:怎么去除视频播放全屏分享按钮
  • 白树呐:楼主,我按你的方式放进去,x5用不了
  • 无心下棋:大兄弟,这玩意我用半年了,今天才知道还要加个so文件。。。
    喜欢丶下雨天:@无心下棋 1.我发现一个问题去掉.so 文件我的可以运行不处理视频的页面,是因为直接调用系统的webview了,已经和腾讯x5没有关系了,所以我上面回答你的有误。
    2.不过对于你的问题你可以吧这个.so文件放进去,再看看。
    无心下棋: @小邦向前冲 我之前没加so,那个x5内核就没加载成功过😂我还一直等着官方修复呢
  • 雷小歪:有bug 会崩溃
    喜欢丶下雨天:@小歪_a1d6 在什么地方出现空指针,用的我的demo还是自己配的,我这未曾发现空指针
    雷小歪: @小邦向前冲 空指针
    喜欢丶下雨天: @小歪_a1d6 报错是什么
  • 丶梓沐:牛逼

本文标题:X5内核 腾讯SDK 全攻略

本文链接:https://www.haomeiwen.com/subject/vaqldxtx.html