Js调用Android的方法
1、初始化WebView
X5WebView webView =new X5WebView(this,null);我这里用的是腾讯的TBS浏览服务.详情参考上一篇文章：
2、设置初始化WebSetting
3、给WebView添加addJavascriptInterface（）
例如：
android为甚么能执行js
android能执行js是因为js的跨平台，前端只要通过开发h5页面就能很快的在移动手机中展示，达到需求的效果。
也就是说，Javascript可以在安卓系统.上高效运行了。不像其他JS运行时(包括JV8 Jav8), J2V8采用基于原始的方法,导致更少的垃圾。下面的脚本生..
...
android中webview与js交互
移动开发中，我们经常会遇到混合开发模式，经常是在移动客户端中增加网页，来减少客户端的压力，同时也让软件更加灵活。废话少说，下面直接进入主题。
webView.getSettings().setAppCachePath(getCacheDir().getAbsolutePath());
webView.getSettings().setAppCacheEnabled(true);
if (Constant.DEBUG) {
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
}
if (Build.VERSION.SDK_INT = Build.VERSION_CODES.LOLLIPOP) {
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
//参数1 定义Android 与js交互的接口， 参数2 与js交互的一个常量，可以是任意一个常量字符串，
但是h5网页调用的时候需要增加这个参数二：handler
public class JSInterface{
@JavascriptInterface//这个标注必须加上 表示js要调用的方法，可以自动识别
public void getShareInfo(String strings) {
//todo android dosomething
}
}
那么 js端该如何调用这个方法呢\
android 和ios的调用方法不一样 因此 h5里面需要区别andorid和ios机型来分别调用移动端方法
如android：
//handler 是与android 约定的常量（最好做成全局通用的常量）
//getShareInfo 是与android 定义的调用方法
以上常量、方法、参数类型 必须一致才能成功调用
WebView提供两个事件回调类给应用层，分别为WebViewClient,WebChromeClient开发者可以继承
这两个类，接手相应事件处理。WebViewClient 主要提供网页加载各个阶段的通知，比如网页开始
加载onPageStarted，网页结束加载onPageFinished等；WebChromeClient主要提供网页加载过程
中提供的数据内容，比如返回网页的title,favicon等。
有需要监听加载网页进度
//需要webBar的可以自定义增加一个webBar
最后，就是大家都知道的webView.loadUrl(url);//url需要加载的网页
那么，如何在android调用js的方法呢
//getMsg() 为js里面暴露的方法
在销毁的时候：
protected void onDestroy() {\
super.onDestroy();\
if (webView != null) {\
webView.loadUrl("about:blank");\
webView.destory();\
}\
}
安卓手机javascript被禁用怎么开启？
一般是浏览器里禁用，进入浏览器设置找到隐私或高级或扩展功能，再找到js并开启即可。具体要看是哪个浏览器里提示，不同浏览器操作也略有不同。
js android端实现视频自动播放
在安卓手机上，使用video播放视频有个问题，video控件层级会永远在顶层，不利于视频互动H5开发，而IOS手机上不会有此问题。
video src="" x5-video-player-type="h5"/
x5-video-player-type="h5" 只适用于微信浏览器
注意:
1.jsmpeg 需要将视频转为.ts的文件
先安装ffmpeg,然后执行以下命令,将mp4格式的文件转成 .ts(用命令行转的才能正常播放)
ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts(文件的路径不太好找,建议全局搜索一下)
2.安卓上使用jsmpeg插件渲染canvas，ios上正常使用video并加入隐藏控制条等设置
3. 请使用此js,原作者的js没有回调设置
4. 原作者github地址
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleJSMpegPlayer/title
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"
style
html,body{
padding: 0;
margin: 0;
}
.msg-wrap{
position: fixed;
top: 0;
left: 0;
background: #fff;
border: 1px solid #000;
}
.video-wrap{
width: 100%;
display: none;
}
/style
/head
body
video class="video-wrap" id="video-ios" x5-playsinline webkit-playsinline playsinline src="1_BG_4s_2.mp4"/video
canvas class="video-wrap" id="video-android"/canvas
div class="msg-wrap" id="msgTxt"loading.../div
script src=""/script
script
var msgTxt = document.getElementById('msgTxt');
var video = document.getElementById('video-ios');
var canvas = document.getElementById('video-android');
//检测是否为非安卓浏览器并作处理
var check = !! navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(check){
msgTxt.innerHTML = "not Android mode"
video.style.display="block"
video.play()
//监听video加载完成
video.addEventListener("loadedmetadata",function(){
msgTxt.innerHTML = "not Android mode:videoPlaying"
})
//监听video播放结束
video.addEventListener("ended",function(){
msgTxt.innerHTML = "not Android mode:videoEnd"
})
}else{
// jsmpegPlay(canvas,'1_BG_4s_5.ts',startCallBack,playingCallBack,endCallBack)
jsmpegPlay(canvas,'out.ts',startCallBack,playingCallBack,endCallBack)
}
function jsmpegPlay(Vcanvas,vVideo,startFun,playingFun,endFun) {
var player = new JSMpeg.Player(
vVideo ,{
canvas: Vcanvas,
loop: false,
autoplay: true,
startSign: true,
startCallBack: startFun,
playingCallBack: playingFun,
endCallBack: endFun
});
}
//视频开始播放（即解码完成）执行
function startCallBack() {
msgTxt.innerHTML = "Android mode:videoPlaying"
canvas.style.display="block"
}
//视频播放进度
function playingCallBack(currentTime) {
// console.log(currentTime)
}
//视频播放完成执行
function endCallBack() {
msgTxt.innerHTML = "Android mode:videoEnd"
}
/script
/body
/html
项目中遇到的坑,把使用方法记录一下
在线演示DOMO
JSMpegPlayer
github地址,欢迎小星星~~~