一、问题背景：

在最近的一个项目中，需要有一个上传视频的功能，原先使用的优酷开放平台，但是由于很久没有维护了，导致账号过期了，且优酷开放平台在17年三月份之后，就暂停新应用的创建和生成新的应用，所以重新选用了爱奇艺开放平台。

二、使用步骤

（说明：申请账号，创建应用和审核，请参考官方的文档，我在这里就不做详细的说明了，这里直接上代码。不过我也是第一次使用这个爱奇艺的开放平台，所以可能会有错误，但是功能是可以实现的）

引用sdkbase_min.js

HTML:

<div class="container"><form  class="well form-horizontal"  name="video-upload"><fieldset><div class="control-group"><label class="control-label" for="input01">选择文件：</label><div style="display:inline-block;margin-left:20px" id="chooseFile"><a style="width:90px;display:inline-block;background:#eaeaea;border:1px solid #ddd;text-align:center;padding:2px"  href="javascript:void(0);" id="chooseFileBtn">上传</a></div><span id="file_name"></span></div> <div class="control-group"><label class="control-label" for="input01">标题：</label><div class="controls"><input type="text" class="input-xlarge" id="input01" name="title" οnkeyup="checkTitle()" οnkeydοwn="checkTitle()"><span id="title_error_span" style="display:none"><img src="static/images/shipin/error02.gif" width="17" height="17" alt="" />&nbsp;<span id="title_error_text">请输入标题</span></span><span id="title_right_span" style="display:none"><img src="static/images/shipin/right.gif" width="17" height="17" alt=""/>&nbsp;<span>标题可用</span></span></div></div><div class="control-group"><label class="control-label" for="textarea">简介：</label><div class="controls"><textarea class="input-xlarge" id="textarea" rows="3" name="description" οnkeyup="checkDric()" οnkeydοwn="checkDric()"></textarea><span id="description_error_span" style="display:none"><img src="static/images/shipin/error02.gif" width="17" height="17" alt="" />&nbsp;<span id="description_error_text">简介过长</span></span><span id="description_right_span" style="display:none"><img src="static/images/shipin/right.gif" width="17" height="17" alt=""/>&nbsp;<span>简介可用</span></span></div></div><div class="control-group"><label class="control-label" for="input02">标签：</label><div class="controls"><input type="text" class="input-xlarge" id="input02" name="tags" οnkeyup="checkTags()" οnkeydοwn="checkTags()"><span class="help-inline"></span><span id="tags_error_span" style="display:none"><img src="static/images/shipin/error02.gif" width="17" height="17" alt="" />&nbsp;<span id="tags_error_text">请输入标签</span></span><span id="tags_right_span" style="display:none"><img src="static/images/shipin/right.gif" width="17" height="17" alt=""/>&nbsp;<span>标签可用</span></span></div></div><div class="form-actions"><button type="button" disabled="disabled" class="btn btn-primary start"  id="btn-upload-start" ><i class="icon-upload icon-white"></i><span>开始上传</span></button><div class="percent" id="percent"></div><div class="percent_text" id="percent_text"></div></div></fieldset></form><div class="row" ><div class="span5" id="upload-status-wraper" ></div></div><div class="well"><h3>说明</h3><ul><li>最大支持上传<strong>1 GB</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(){var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;if(defaultValue==''){ input.value=text}input.οnfοcus=function(){if(input.value===text){this.value=''}};input.οnblur=function(){if(input.value===''){this.value=text}}};if(!supportPlaceholder){for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');if(input.type==='text'&&text){placeholder(input)}}}// 文件上传按钮div，这个div包裹文件上传按钮。文件上传按钮貌似不能是button类型，不知道为什么，反正用的是他们demo里的没有变var btn = document.getElementById("chooseFile");// 初始化var vcop = new Q.vcopClient({uploadBtn:{dom:btn,btnH:"32px",btnW:"62px",btnT:"100px",btnL:"100px",btnZ:"999",hasBind:false},appKey:"XXXXXXXXXXX",  // 填写申请的app key appSecret:"XXXXXXXXXXXXXXXXXXXXXXX", // 填写app secretmanagerUrl:"http://openapi.iqiyi.com/",uploadUrl:"http://upload.iqiyi.com/",needMeta:false});// 企业几授权vcop.getAuthEnterprise(function (data) {if(data){vcop.authtoken = data.data.access_token;}});// 文件信息var fileinfo = null;// 上传组件var uoploader = 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=='network break down'){breakdown=true;uoploader.pauseUpload();}}else{alert("上传失败");}},onProgress:function (data) {    // 5/7 增加速度，剩余时间var per = document.getElementById("percent");per.style.width = data.percent + "%";$("#percent_text").text("上传中....速度："+data.speed+"kb/s , 剩余时间："+data.remainTime + "s");}});});});function checkTitle(){//显示数据$("#title_error_span").hide();$("#title_right_span").hide();//获取昵称var title = $("#input01").val();//判断用户名是否为空if(title == "" || title == null){$("#title_right_span").hide();$("#title_error_span").show();$("#btn-upload-start").attr("disabled","disabled");}else if(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);}}function checkTags(){var txt=new RegExp("[ ,\\`,\\~,\\!,\\@,\#,\\$,\\%,\\^,\\+,\\*,\\&,\\\\,\\/,\\?,\\|,\\:,\\.,\\<,\\>,\\{,\\},\\(,\\),\\',\\;,\\=,\"]");//显示数据$("#tags_error_span").hide();$("#tags_right_span").hide();var tags = $("#input02").val();//判断用户名是否为空if(tags == "" || tags == null){$("#tags_right_span").hide();$("#tags_error_span").show();$("#btn-upload-start").attr("disabled","disabled");}else if(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");}   //特殊字符正则表达式else  if (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);}}/*** 检查简介*/function checkDric(){//显示数据$("#description_error_span").hide();$("#description_right_span").hide();var content = $("#textarea").val().toString();var len = 0;if (content != null && content != "") {for ( var j = 0; j < content.length; j++) {var str = content.charAt(j);var reg = /^[\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代码

// 获取视频idvar videoId = $("#videoId").attr("value");// 初始化var vcop = new Q.vcopClient({appKey:"618c7aca5e6d47648e6c4d6fd2e246af",  // 填写申请的app key appSecret:"13a3fbb37e707ec19322c0478d860e7c", // 填写app secretmanagerUrl:"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 = "<img  src='static/images/shipin/shipin_zhuanma.gif' />";$("#shipin_img_div").html(imghtml);}else if(_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){data = $.parseJSON(data);var swfUrl = data.data.swfurl;var vid =  swfUrl.substring(swfUrl.indexOf("vid=") + 4, swfUrl.indexOf("&tvId"));var tvid = swfUrl.substring(swfUrl.indexOf("tvId=") + 5, swfUrl.indexOf("&cnId"));// 这行代码，copy open.iqiyi.com -->我的应用 -->播放器设置的那段代码imghtml = "<iframe src='http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid="+vid+"&tvId="+tvid+"&sign=5dd681d8af3e02e699f7648b09d6a7cacd269ed2e98f3fa0b3c125d1df1283b3&appKey=618c7aca5e6d47648e6c4d6fd2e246af&appId=8769' frameborder='0' width='100%' height='100%' allowfullscreen='true'></iframe>";$("#youkuplayer").html(imghtml).css("display",'inline-block');});}else{ //审核未通过，不存在或已删除 ，上传中imghtml = "<img  src='static/images/shipin/shipin_pingbi.gif' />";$("#shipin_img_div").html(imghtml);}}else{imghtml = "<img  src='static/images/shipin/shipin_zhuanma.gif' />";$("#shipin_img_div").html(imghtml);}}});}});