移动端使用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;@Overridepublic void onCreate() {super.onCreate();// 搜集本地tbs内核信息并上报服务器，服务器返回结果决定使用哪个内核。// TbsDownloader.needDownload(getApplicationContext(), false);QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {@Overridepublic void onViewInitFinished(boolean arg0) {Log.e("app", " onViewInitFinished is " + arg0);}@Overridepublic void onCoreInitFinished() {}};QbSdk.setTbsListener(new TbsListener() {@Overridepublic void onDownloadFinish(int i) {Log.d("app", "onDownloadFinish is " + i);}@Overridepublic void onInstallFinish(int i) {Log.d("app", "onInstallFinish is " + i);}@Overridepublic 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.WebViewandroid: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());

以上就是全部了。