标签:tpi color 标签 style dex cti 传值 ica size
1、与安卓语音的交互
注意:获取语音的src 需要用DOM元素获取
(1)HTML (点击按钮告诉安卓,录音开始与结束)
<span class="voice" onclick="voicecli()">上传语音</span>
(2)JS
//点击语音 function voicecli() { $(‘.addPicture‘).hide(); $(‘.expaddVoice‘).show(); //调方法 //判断调安卓方法显示或隐藏语音 if($(".voice").text()=="上传语音") { $(".voice").text("取消语音"); window.contact.isVisShow(); //调用安卓方法,告诉安卓录音开始,安卓显示录音按钮 }else if($(".voice").text()=="取消语音"){ $(".voice").text("上传语音"); window.contact.isVisHide(); //调用安卓方法,告诉安卓录音结束,安卓取消录音按钮 } }
//点击关闭图标音频
$(‘.yuyinClose‘).click(function() {
$("#audiovis").attr("src","");
$(".exchVoiceClose").hide();
});
(3)HTML (录音完成后的语音条)
<div class="exchVoiceClose"> <i class="iconfont i-shengyin"></i> //声音图标 <span></span> <audio id="audiovis" src=""></audio> //音频标签 <em class="iconfont icon-guanbi yuyinClose"></em> //语音条关闭按钮 </div>
(4)JS (写一个方法供安卓调用,传语音路径)
//安卓调的语音方法 function dell() { //从安卓获取语音路径 var voices="http://219.140.191.226:8080/agriculture/uploads/"+window.contact.Vis(); // var voices="http://192.168.199.108:8080/agriculture/uploads/"+window.contact.Vis(); //获取页面语音添路径(用DOM元素获取) var audio2 = document.getElementById("audiovis"); audio2.src=voices; //点击语音条时告诉安卓语音播放 $(‘.exchVoiceClose‘).click(function() { window.contact.jsGeiAndroidChuanzhi(voices); }); //语音条显示 if(voices!=null) { $(".exchVoiceClose").show(); } }
(5)详情页语音条的显示
动态创建语音条标签
//语音 if (datas[i].voice != null && datas[i].voice != "") { str += "<div onclick=playvoice(‘" + datas[i].voice + "‘)>" + "<div class=‘exchVoice‘>" + "<i class=‘iconfont i-shengyin‘></i><span class=‘second‘></span>" +
"<audio src=‘"+urllogo+datas[i].voice+"‘></audio>" + //urllogo 是服务器地址
"</div>" +
"</div>"; }
点击播放语音,给安卓传值
//播放语音 function playvoice(url){ window.contact.jsGeiAndroidChuanzhi(urllogo+url); }
2、与安卓视频的交互
1、HTML
//存放video标签的位置
<div class="videoPlay"></div>
2、JS 动态创建video标签(window.open("http://www.baidu.com") 打开一个新窗口)
if(data[0].url != "") { $(‘.videoPlay‘).html(""); var urls = data[0].url.replace("http://",""); urls = "http://" + urls; //视频链接形成外链 var videos = "<video class=‘videoPlaycount‘ controls=‘controls‘ src=‘"+urls+"‘></video>"; $(‘.videoPlay‘).html(videos); }
//点击返回键video标签移除,并且安卓调用此方法 function goivideo() { if($(‘.govideo>video‘).length>0) { $(‘.govideo‘).children(‘video‘).remove(); } }
//返回键处调用
3、与安卓上传图片的交互
(1)HTMl 点击上传图片按钮,和图片存放位置
<!-- 从服务器拿到字符串图片-->
<input type="hidden" name="imgurl" id="imgurl" value=""/>
<div class="addPicture clearfix"> <div class="addPictureImg" id="imgboxid"></div> //图片位置 <div class="addPictureDiv"> <label class="pictureDivCon"> //按钮 <input type=‘file‘ id="imgInp" name="file" class="file" multiple="multiple" /> <!-- onchange="xmTanUploadImg(this)"--> <i class="iconfont icon-tianjiatupian"></i> <p>添加图片</p> </label> </div> </div>
(2)掉安卓方法,从服务器拿取图片
//从服务器拿值 var k=0;//用于记数 (第几张照片) function H5getPicNameFromAndroid() { k++; window.contact.jsGeiAndroidToken("picA"); //调安卓方法,传一下固定值进行判断 var imgurl = window.contact.getPicName(); //从安卓拿到路径 var imgurlstr=imgurl.split(","); //将获取到的图片分隔 var str=""; str=$("#imgurl").val(); //给各个提交页面的input存储img if(str==""){ //如果是第一张图片 $("#imgurl").val(imgurlstr[0]); }else{ $("#imgurl").val(str+","+imgurlstr[0]); } var imgstr="<div class=‘img-div‘><img style=‘width:2.25rem;height:2.25rem‘ src=‘@src‘/><i onclick=clicks(this,"+k+") class=‘iconfont icon-guanbi addPictureClose‘></i></div>"; imgstr=imgstr.replace(‘@src‘, urllogo+imgurlstr[0]); var oimgbox=document.getElementById("imgboxid"); oimgbox.appendChild(ndiv); }
(3)点击删除按钮,删除服务器中的图片
//图片删除按钮 function clicks(me,index){ var str=$("#imgurl").val(); var img=str.split(","); img.splice((index-1),1); img.toString(); $("#imgurl").val(img); $(me).parent().remove(); }
(4)页面中获取图片
var imgurl=$("input[name=imgurl]").val();
标签:tpi color 标签 style dex cti 传值 ica size
原文地址:http://www.cnblogs.com/dxt510/p/7826480.html