一、问题背景:

    在最近的一个项目中,需要有一个上传视频的功能,原先使用的优酷开放平台,但是由于很久没有维护了,导致账号过期了,且优酷开放平台在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="" />
										&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" 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="" />
										&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" 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="" />
										&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.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);
            		  }
            	  }
              });
          }
      });