一、问题背景：
在最近的一个项目中，需要有一个上传视频的功能，原先使用的优酷开放平台，但是由于很久没有维护了，导致账号过期了，且优酷开放平台在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);
}
}
});
}
});
原文地址：http://blog.51cto.com/fengcl/2071112
时间： 2024-08-12 13:28:48