在最近的一个项目中,需要有一个上传视频的功能,原先使用的优酷开放平台,但是由于很久没有维护了,导致账号过期了,且优酷开放平台在17年三月份之后,就暂停新应用的创建和生成新的应用,所以重新选用了爱奇艺开放平台。
二、使用步骤
(说明:申请账号,创建应用和审核,请参考官方的文档,我在这里就不做详细的说明了,这里直接上代码。不过我也是第一次使用这个爱奇艺的开放平台,所以可能会有错误,但是功能是可以实现的)
引用sdkbase_min.js
HTML:
<divclass="container"><formclass="wellform-horizontal"name="video-upload"><fieldset><divclass="control-group"><labelclass="control-label"for="input01">选择文件:</label><divstyle="display:inline-block;margin-left:20px"id="chooseFile"><astyle="width:90px;display:inline-block;background:#eaeaea;border:1pxsolid#ddd;text-align:center;padding:2px"href="javascript:void(0);"id="chooseFileBtn">上传</a></div><spanid="file_name"></span></div><divclass="control-group"><labelclass="control-label"for="input01">标题:</label><divclass="controls"><inputtype="text"class="input-xlarge"id="input01"name="title"onkeyup="checkTitle()"onkeydown="checkTitle()"><spanid="title_error_span"style="display:none"><imgsrc="static/images/shipin/error02.gif"width="17"height="17"alt=""/> <spanid="title_error_text">请输入标题</span></span><spanid="title_right_span"style="display:none"><imgsrc="static/images/shipin/right.gif"width="17"height="17"alt=""/> <span>标题可用</span></span></div></div><divclass="control-group"><labelclass="control-label"for="textarea">简介:</label><divclass="controls"><textareaclass="input-xlarge"id="textarea"rows="3"name="description"onkeyup="checkDric()"onkeydown="checkDric()"></textarea><spanid="description_error_span"style="display:none"><imgsrc="static/images/shipin/error02.gif"width="17"height="17"alt=""/> <spanid="description_error_text">简介过长</span></span><spanid="description_right_span"style="display:none"><imgsrc="static/images/shipin/right.gif"width="17"height="17"alt=""/> <span>简介可用</span></span></div></div><divclass="control-group"><labelclass="control-label"for="input02">标签:</label><divclass="controls"><inputtype="text"class="input-xlarge"id="input02"name="tags"onkeyup="checkTags()"onkeydown="checkTags()"><spanclass="help-inline"></span><spanid="tags_error_span"style="display:none"><imgsrc="static/images/shipin/error02.gif"width="17"height="17"alt=""/> <spanid="tags_error_text">请输入标签</span></span><spanid="tags_right_span"style="display:none"><imgsrc="static/images/shipin/right.gif"width="17"height="17"alt=""/> <span>标签可用</span></span></div></div><divclass="form-actions"><buttontype="button"disabled="disabled"class="btnbtn-primarystart"id="btn-upload-start"><iclass="icon-uploadicon-white"></i><span>开始上传</span></button><divclass="percent"id="percent"></div><divclass="percent_text"id="percent_text"></div></div></fieldset></form><divclass="row"><divclass="span5"id="upload-status-wraper"></div></div><divclass="well"><h3>说明</h3><ul><li>最大支持上传<strong>1GB</strong>视频文件</li><li>允许上传的视频格式为:wmv,avi,dat,asf,rm,rmvb,ram,mpg,mpeg,3gp,mov,mp4,m4v,dvix,dv,dat,<br/>mkv,flv,vob,ram,qt,divx,cpk,fli,flc,mod。不符合格式的视频将会被丢弃,请确保视频格式的正确性,避免上传失败</li></ul></div></div>
JS代码
/*解决input中placeholder值在ie中无法支持的问题*/$(document).ready(function(){vardoc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'indoc.createElement('input'),placeholder=function(input){vartext=input.getAttribute('placeholder'),defaultValue=input.defaultValue;if(defaultValue==''){input.value=text}input.onfocus=function(){if(input.value===text){this.value=''}};input.onblur=function(){if(input.value===''){this.value=text}}};if(!supportPlaceholder){for(vari=0,len=inputs.length;i<len;i++){varinput=inputs[i],text=input.getAttribute('placeholder');if(input.type==='text'&&text){placeholder(input)}}}//文件上传按钮div,这个div包裹文件上传按钮。文件上传按钮貌似不能是button类型,不知道为什么,反正用的是他们demo里的没有变varbtn=document.getElementById("chooseFile");//初始化varvcop=newQ.vcopClient({uploadBtn:{dom:btn,btnH:"32px",btnW:"62px",btnT:"100px",btnL:"100px",btnZ:"999",hasBind:false},appKey:"XXXXXXXXXXX",//填写申请的appkeyappSecret:"XXXXXXXXXXXXXXXXXXXXXXX",//填写appsecretmanagerUrl:"http://openapi.iqiyi.com/",uploadUrl:"http://upload.iqiyi.com/",needMeta:false});//企业几授权vcop.getAuthEnterprise(function(data){if(data){vcop.authtoken=data.data.access_token;}});//文件信息varfileinfo=null;//上传组件varuoploader=null;//上传点击事件$("#chooseFileBtn").click(function(){uoploader=vcop.initUpload({slicesize:1024*128,access_token:vcop.authtoken,device_id:"test",uid:"test",allowType:["xv","avi","dat","mpg","mpeg","vob","mkv","mov","wmv","asf","rm","rmvb","ram","flv","mp4","3gp","dv","qt","divx","cpk","fli","flc","m4v","pfv"]//重置类型},{onSuccess:function(data){if(data&&data.data){fileinfo=data.data;$("#file_name").text(data.data.file_name);$("#input01").val(data.data.file_name);$("#textarea").val(data.data.file_name);checkDric();checkTitle();checkTags();}},onError:function(data){alert("错误");}});//初始化上传组件uoploader.initOneFile({btnW:"100px",btnH:"100px",btnT:"100px",btnL:"12px"});});//开始上传$("#btn-upload-start").click(function(){//上传按钮不可用$("#btn-upload-start").attr("disabled","disabled");//设置meta信息vcop.setMetadata({file_id:fileinfo.file_id,file_name:fileinfo.file_name,description:fileinfo.file_name,uploader:uoploader//20130819需手工设置meta},function(data){console.log(data);})//开始上传uoploader.startUpload(fileinfo,{onFinish:function(data){$("#btn-upload-start").attr("disabled",false);if(data&&data.manualFinish===true){uoploader.finishUpload({onSuccess:function(){window.location.href='<%=basePath%>personal/uploadVideo?videoId='+fileinfo.file_id;},onError:function(){alert("上传失败");}});}else{alert("上传成功");}setTimeout(function(){uoploader.delLocal(fileinfo.file_name,fileinfo.file_id);//20141227resetPer();},2000);},onError:function(data){$("#btn-upload-start").attr("disabled",false);if(data.msg){//续传if(data.msg=='networkbreakdown'){breakdown=true;uoploader.pauseUpload();}}else{alert("上传失败");}},onProgress:function(data){//5/7增加速度,剩余时间varper=document.getElementById("percent");per.style.width=data.percent+"%";$("#percent_text").text("上传中....速度:"+data.speed+"kb/s,剩余时间:"+data.remainTime+"s");}});});});functioncheckTitle(){//显示数据$("#title_error_span").hide();$("#title_right_span").hide();//获取昵称vartitle=$("#input01").val();//判断用户名是否为空if(title==""||title==null){$("#title_right_span").hide();$("#title_error_span").show();$("#btn-upload-start").attr("disabled","disabled");}elseif(title.length>30){$("#title_error_text").text("标题最多能输入30个字");$("#title_right_span").hide();$("#title_error_span").show();$("#btn-upload-start").attr("disabled","disabled");}else{$("#title_error_span").hide();$("#title_right_span").show();$("#btn-upload-start").attr("disabled",false);}}functioncheckTags(){vartxt=newRegExp("[,\\`,\\~,\\!,\\@,\#,\\$,\\%,\\^,\\+,\\*,\\&,\\\\,\\/,\\?,\\|,\\:,\\.,\\<,\\>,\\{,\\},\\(,\\),\\',\\;,\\=,\"]");//显示数据$("#tags_error_span").hide();$("#tags_right_span").hide();vartags=$("#input02").val();//判断用户名是否为空if(tags==""||tags==null){$("#tags_right_span").hide();$("#tags_error_span").show();$("#btn-upload-start").attr("disabled","disabled");}elseif(tags.length<2||tags.length>12){$("#tags_right_span").hide();$("#tags_error_span").show();$("#tags_error_text").text("标签内容限定2~12的字符");$("#btn-upload-start").attr("disabled","disabled");}//特殊字符正则表达式elseif(txt.test(tags)){$("#tags_right_span").hide();$("#tags_error_span").show();$("#tags_error_text").text("标签含有特殊字符");$("#btn-upload-start").attr("disabled","disabled");}else{$("#tags_error_span").hide();$("#tags_right_span").show();$("#btn-upload-start").attr("disabled",false);}}/***检查简介*/functioncheckDric(){//显示数据$("#description_error_span").hide();$("#description_right_span").hide();varcontent=$("#textarea").val().toString();varlen=0;if(content!=null&&content!=""){for(varj=0;j<content.length;j++){varstr=content.charAt(j);varreg=/^[\u4E00-\u9FA5]+$/;if(reg.test(str)){len+=2;}else{len+=1;}}}if(content==""||len==0){$("#description_right_span").hide();$("#description_error_text").text("请输入简介");$("#description_error_span").show();$("#btn-upload-start").attr("disabled","disabled");}if(len<=25&&len>0){$("#description_error_span").hide();$("#description_right_span").show();$("#btn-upload-start").attr("disabled",false);}else{$("#description_right_span").hide();$("#description_error_span").show();$("#btn-upload-start").attr("disabled","disabled");}}
上传完成后,页面播放。JS代码
//获取视频idvarvideoId=$("#videoId").attr("value");//初始化varvcop=newQ.vcopClient({appKey:"618c7aca5e6d47648e6c4d6fd2e246af",//填写申请的appkeyappSecret:"13a3fbb37e707ec19322c0478d860e7c",//填写appsecretmanagerUrl:"http://openapi.iqiyi.com/",uploadUrl:"http://upload.iqiyi.com/",needMeta:false});//授权vcop.getAuthEnterprise(function(data){if(data){vcop.authtoken=data.data.access_token;console.log(vcop.authtoken);//获取视频信息vcop.getVideoInfo({file_ids:videoId//获取视频信息},function(result){console.log(result);console.log("1:"+result);console.log("2:"+(result.code=="A00000"));if(result.code=="A00000"){var_r=result.data;console.log("3:"+_r)console.log("4:"+(_r!='[]'));if(_r!='[]'&&_r!=undefined&&_r!=''&&_r!=null){if(_r[0].fileStatus==1){//发布中imghtml="<imgsrc='static/images/shipin/shipin_zhuanma.gif'/>";$("#shipin_img_div").html(imghtml);}elseif(_r[0].fileStatus==2){//已经发布$("#shiping_img_div").css("display","none");//这行代码主要是为了获取vid和tvid$.get("http://openapi.iqiyi.com/api/file/fullStatus?access_token="+vcop.authtoken+"&file_id="+videoId,function(data){