使用爱奇艺开放平台上传视频
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用爱奇艺开放平台上传视频相关的知识,希望对你有一定的参考价值。
一、问题背景: 在最近的一个项目中,需要有一个上传视频的功能,原先使用的优酷开放平台,但是由于很久没有维护了,导致账号过期了,且优酷开放平台在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" onkeyup="checkTitle()" onkeydown="checkTitle()"> <span id="title_error_span" style="display:none"> <img src="static/images/shipin/error02.gif" width="17" height="17" alt="" /> <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=""/> <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" onkeyup="checkDric()" onkeydown="checkDric()"></textarea> <span id="description_error_span" style="display:none"> <img src="static/images/shipin/error02.gif" width="17" height="17" alt="" /> <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=""/> <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" onkeyup="checkTags()" onkeydown="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="" /> <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=""/> <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.onfocus=function(){ if(input.value===text){this.value=''}}; input.onblur=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 secret managerUrl:"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); // 20141227 resetPer(); }, 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代码
// 获取视频id var videoId = $("#videoId").attr("value"); // 初始化 var vcop = new Q.vcopClient({ appKey:"618c7aca5e6d47648e6c4d6fd2e246af", // 填写申请的app key appSecret:"13a3fbb37e707ec19322c0478d860e7c", // 填写app secret managerUrl:"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); } } }); } });
以上是关于使用爱奇艺开放平台上传视频的主要内容,如果未能解决你的问题,请参考以下文章