26
2017
09

移动端 使用X5 内核 html自动播放视频

1.首先集成配置X5内核

1. 集成

SDK下载链接:
https://x5.tencent.com/tbs/sdk.html

如果是Android Studio用户将 相应的jar包放在 jniLibs 文件夹下,如果是Eclipse用户,放在libs文件夹下即可。

x5暂时不提供64位so文件,为了保证64位手机能正常加载x5内核,如果使用是Eclipse则需要将所有的.so文件都放置在so加载目录:lib/armeabi文件夹下

如果使用的是 Android studio则需要进行两项配置,
(1)打开对应module中的build.gradle文件,在文件的android{}中的defaultConfig{}里(如果没有defaultConfig{}则手动添加)添加如下配置: ndk{abiFilters “armeabi”},如果配置后编译报错,那么需要在gradle.properties文件中加上Android.useDeprecatedNdk=true;
(2)找出build.gradle中配置的so加载目录:jniLibs.srcDir:customerDir,如果没有该项配置则so加载目录默认为:src/main/jniLibs,需要将.so文件都放置在so加载目录的armeabi文件夹下(没有该目录则新建一个,AP中没有使用到.so文件则需要拷贝任意一个32位的so文件到该目录下,如果没有合适的so可以到官网http://x5.tencent.com/tbs/sdk.html下载官网“SDK接入示例“,拷贝对应目录下的liblbs.so文件),so加载目录下不要有其他以”armeabi“开头的文件夹。

配置

App 首次就可以加载 x5 内核,在Application中进行配置,在Manifest中修改Application的名字

android:name="com.tzl.testapp.App"
public class App extends Application {

    private static Context context;

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

        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {

            @Override
            public void onViewInitFinished(boolean arg0) {
                Log.e("app", " onViewInitFinished is " + arg0);
            }

            @Override
            public void onCoreInitFinished() {
            }
        };
        QbSdk.setTbsListener(new TbsListener() {
            @Override
            public void onDownloadFinish(int i) {
                Log.d("app", "onDownloadFinish is " + i);
            }
            @Override
            public void onInstallFinish(int i) {
                Log.d("app", "onInstallFinish is " + i);
            }
            @Override
            public void onDownloadProgress(int i) {
                Log.d("app", "onDownloadProgress:" + i);
            }
        });
        QbSdk.initX5Environment(getApplicationContext(), cb);
    }
}

3.使用

在XML文件中使用X5的webView

<FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/framelayout"  
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >
    <com.tencent.smtt.sdk.WebView
        android:id="@+id/webview"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent" />  
</FrameLayout >

编写html文件

 <script type="text/javascript"> function myFunction() { var videos = document.getElementById('vi'); videos.loop = 'loop'; videos.play(); } </script>  

 <body onload="myFunction();">
    <div class="item videoItem">
               <video id="vi" controls preload="metadata" title="Big Buck Bunny" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
                  <source src="http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv" type="video/ogv" />
                  <source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4" />
               </video>
               <div class="txt">test</div>
    </div>
 </body>

在 内 添加onload 属性 参数为调用播放的js方法的方法名,同时声明 playsinline x5-video-player-type=”h5” x5-video-player-fullscreen=”true” 两个属性

Android 部分
监听html的加载,在加载完成后调用播放视频的JS代码

 public class MyWebviewCient extends WebViewClient{  

            @SuppressLint("NewApi")
            @Override  
            public WebResourceResponse shouldInterceptRequest(WebView view,  
                    String url) {  
                WebResourceResponse response = null;  
                response = super.shouldInterceptRequest(view, url);  
                return response;  
            }  

            @Override  
            public void onPageFinished(WebView view, String url) {  
                super.onPageFinished(view, url);  
                Log.d("dream", "***on page finished");  
               webView.loadUrl("javascript:myFunction()");   
            }  

 } 

设置监听

 webView.setWebViewClient(new MyWebviewCient());  

以上就是全部了。

上一篇:Android逐帧动画——让图片动起来 下一篇:关于启动一个IOS程序的详细流程图