关于视频上传,cc 视频上传是用flash 进行上传的,首先引入 swfobject/swfobject.js 和 uploadFlashvideo.js,
uploadFlashvideo.js 文件 如下:
var ctx = 'http://192.168.147.35:9510/pc/api'
// -------------------
// 调用者:flash
// 功能:选中上传文件,获取文件名函数
// 时间:2010-12-22
// 说明:用户可以加入相应逻辑
//var swfDivIndex = 0;
function on_spark_selected_file(filename, tag, description) {
document.getElementsByClassName("videofile")[0].value = filename;
submitvideo();
}
// -------------------
// 调用者:flash
// 功能:验证上传是否正常进行函数
// 时间:2010-12-22
// 说明:用户可以加入相应逻辑
// -------------------
function on_spark_upload_validated(status, videoid) {
if (status == "OK") {
document.getElementsByClassName('vid')[0].innerHTML = videoid;
} else if (status == "NETWORK_ERROR") {
alert("网络错误");
} else {
alert("api错误码:" + status);
}
}
// -------------------
// 调用者:flash
// 功能:通知上传进度函数
// 时间:2010-12-22
// 说明:用户可以加入相应逻辑
// -------------------
function on_spark_upload_progress(progress) {
var success = document.getElementsByClassName("success")[0];
var warn = document.getElementsByClassName("warn")[0];
var uploadProgress = document.getElementsByClassName("progress")[0];
if (progress == -1) {
warn.style.display = 'block';
} else if (progress == 100) {
uploadProgress.innerHTML = "100%";
success.style.display = 'block';
} else {
uploadProgress.innerHTML = progress + "%";
}
}
function positionUploadSWF() {
/* document.getElementById("swfDiv").style.width = document
.getElementById("btn_width").style.width;
document.getElementById("swfDiv").style.height = document
.getElementById("btn_width").style.height; */
}
//控制上传
function submitvideo() {
var title = encodeURIComponent(
document.getElementsByClassName("videofile")[0].value, "utf-8");
document.getElementsByClassName("request_params")[0].innerHTML = title;
var url = ctx + "/cc/getUploadUrl?title=" + title +
"&tag=" + '' +
"&description=" + title;
var req = getAjax();
req.open("GET", url, true);
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
var re = JSON.parse(req.responseText).data; //获取返回的内容
var embedId = "embed" + 0
document.getElementById(embedId).start_upload(re); // 调用flash上传函数
}
}
};
req.send(null);
}
function getAjax() {
var oHttpReq = null;
if (window.XMLHttpRequest) {
oHttpReq = new XMLHttpRequest;
if (oHttpReq.overrideMimeType) {
oHttpReq.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
try {
oHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
oHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
} else if (window.createRequest) {
oHttpReq = window.createRequest();
} else {
oHttpReq = new XMLHttpRequest();
}
return oHttpReq;
}
上传文件按钮 写法
<div>
<el-input class="videofile" name="videofile" size="small" style="display:none;"></el-input>
<div style="position:relative;display:inline-block;" >
<el-button size="mini" value="upload" id="btn_width" type="primary">上传</el-button>
<div :id="swfDiv" style="position:absolute;left:0;top:0;"></div>
</div>
<div class="progress-video">
<div><span>视频ID:</span><label class="videoIdClass vid" ref="videoId">{{videoValue}}</label></div>
<div style="display:none;"> <span>视频名称:</span><span class="request_params"></span></div>
<div>
<span class="progress"></span>
<i class="el-icon-circle-check progressIcon success" style="color:#67C23A;display:none;"></i>
<i class="el-icon-warning progressIcon warn" style="color:#F56C6C;display:none;"></i></div>
</div>
一进入页面把上传按钮加载出来 触发 下面的方法:
uploaderFlash(){
var swfobj=new SWFObject('http://union.bokecc.com/flash/api/uploader.swf', this.embedIndex, '80', '28','8');
swfobj.addVariable( "progress_interval" , 1);
swfobj.addVariable('title' ,'test');
swfobj.addVariable('number', 123);
swfobj.addParam('allowFullscreen','true');
swfobj.addParam('allowScriptAccess','always');
swfobj.addParam('wmode','transparent');
swfobj.write(this.swfDiv);
},
视频回放:
关于视频回放,应该调用后台接口,然后会返回一串script ,然后
videoScript = videoScript.match(/<script .*?src=\"(.+?)\"/)[1]; //获取script里面的内容
that.videoScript = videoScript;
setTimeout( function() {
var doc = document.getElementById('videoplayer');
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = that.videoScript;
doc.appendChild(script); //在页面中创建一个script ,并把内容插入到 文本中
}, 200 );