web瀏覽器目前用h5 標籤即可，只支持特定編碼的mp4。
用戶很多時候不會轉碼操作，所以在上傳的時候，應在在線自動轉碼
上傳資源一般都存到第三方，存到自己服務器太佔空間，在上傳同時把視頻在線轉碼爲web mp4即可，比如阿里，七牛都有這種服務
如七牛：
建議上傳部分用純前端實現，包括分片上傳，只需設置一個參數即可
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', // 上傳模式，依次退化
browse_button: 'pickfiles', // 上傳選擇的點選按鈕，必需
// 在初始化時，uptoken，uptoken_url，uptoken_func三個參數中必須有一個被設置
// 切如果提供了多個，其優先級爲uptoken > uptoken_url > uptoken_func
// 其中uptoken是直接提供上傳憑證，uptoken_url是提供了獲取上傳憑證的地址，如果需要定製獲取uptoken的過程則可以設置uptoken_func
// uptoken : '<Your upload token>', // uptoken是上傳憑證，由其他程序生成
uptoken_url: $("#basePath").val()+'upload/uploadDocToken.do', // Ajax請求uptoken的Url，強烈建議設置（服務端提供）
// uptoken_func: function(file){ // 在需要獲取uptoken時，該方法會被調用
// // do something
// return uptoken;
// },
get_new_uptoken: true, // 設置上傳文件的時候是否每次都重新獲取新的uptoken
// downtoken_url: '/downtoken',
// Ajax請求downToken的Url，私有空間時使用，JS-SDK將向該地址POST文件的key和domain，服務端返回的JSON必須包含url字段，url值爲該文件的下載地址
unique_names: false, // 默認false，key爲文件名。若開啓該選項，JS-SDK會爲每個文件自動生成key（文件名）
save_key: true, // 默認false。若在服務端生成uptoken的上傳策略中指定了sava_key，則開啓，SDK在前端將不對key進行任何處理
dragdrop: true,
domain: domainPara+"/", // bucket域名，下載資源時用到，必需
container: 'container', // 上傳區域DOM ID，默認是browser_button的父元素
max_file_size: '500mb', // 最大文件體積限制
flash_swf_url: 'admin/assets/js/plupload-2.1.1/Moxie.swf', //引入flash，相對路徑
// max_retries: 0, // 上傳失敗最大重試次數
// dragdrop: true, // 開啓可拖曳上傳
drop_element: 'container', // 拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳
chunk_size: '4mb', // 分塊上傳時，每塊的體積
auto_start: false, // 選擇文件後自動上傳，若關閉需要自己綁定事件觸發上傳
log_level: 5,
filters: {
mime_types : [ //只允許上傳圖片和zip文件
{ title : "office files", extensions : "doc,docx" },
],
max_file_size : '20mb', //最大隻能上傳400kb的文件
prevent_duplicates : true //不允許選取重複文件
},
init: {
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
// 文件添加進隊列後，處理相關的事情
if(progressDiv){
progressDiv.closeDiv(progressDiv.closeUp[0]);
}
progressDiv = getPDiv();
progressDiv.setTitle(file.name);
$("#sourceState").val(file.name+",已選擇");
$("#pickfiles").after(progressDiv.getProgress());
});
},
'BeforeUpload': function(up, file) {
// 每個文件上傳前，處理相關的事情
},
'UploadProgress': function(up, file) {
// 每個文件上傳時，處理相關的事情
progressDiv = getPDiv();
progressDiv.setPercent(file.percent);
progressDiv.setPercentTitle(file.percent);
},
'FileUploaded': function(up, file, info) {
// 每個文件上傳成功後，處理相關的事情
// 其中info是文件上傳成功後，服務端返回的json，形式如：
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 查看簡單反饋
var domain = up.getOption('domain');
var res = $.parseJSON(info);
var sourceLink = domain + res.key; // 獲取上傳成功後的文件的Url
$("#sourceState").val(file.name+"已上傳");
$("#sourceLink").val(sourceLink);
$("#quesViewUrl").val(sourceLink);
progressDiv.closeDiv(progressDiv.closeUp[0]);
},
'Error': function(up, err, errTip) {
//上傳出錯時，處理相關的事情
$("#sourceState").val("上傳失敗");
},
'UploadComplete': function() {
//隊列文件處理完畢後，處理相關的事情
},
// 'Key': function(up, file) {
// // 若想在前端對每個文件的key進行個性化處理，可以配置該函數
// // 該配置必須要在unique_names: false，save_key: false時才生效
// var key = "";
// // do something with key here
// return key
// }
}
});後端做兩件事，提供token和提供轉碼接口
必須設置的幾個屬性
qiniu.tokenutil.ak = **************
qiniu.tokenutil.sk = **************
#上面兩個註冊賬號後在後臺獲取
qiniu.tokenutil.bucket = ***
#bucket是存儲視頻的網盤名字
#qiniu.tokenutil.expireSeconds = 3600
#qiniu.tokenutil.domain = http://www.xxx.com
#domain是預覽視頻的網址前綴提供token的接口按照說明文檔寫就行。
轉碼接口，參數是文件名字，比如1232131.flv
@RequestMapping(value="/zhuanma",method = RequestMethod.GET,produces="application/json")
@ResponseBody
public String zhuanma(String fileName) throws XhException {
if(fileName == null)
{
return "文件名不能爲空！";
}
String accessKey = PropertiesUtil.getQiniuValue("qiniu.tokenutil.ak");
String secretKey = PropertiesUtil.getQiniuValue("qiniu.tokenutil.sk");
String bucket = PropertiesUtil.getQiniuValue("qiniu.tokenutil.bucket");
String key = fileName;
Auth auth = Auth.create(accessKey, secretKey);
String persistentOpfs = "avthumb/mp4/ab/160k/ar/44100/acodec/libfaac/r/30/vb/2200k/vcodec/libx264/s/1280x720/autoscale/1/stripmeta/0";
String saveas_key = UrlSafeBase64.encodeToString(bucket+":"+key+"-zhuanma");
persistentOpfs = persistentOpfs+"|saveas/"+saveas_key;
String persistentPipeline = "zhuanma";
String persistentNotifyUrl = "http://api.example.com/qiniu/pfop/notify";
Configuration cfg = new Configuration(Zone.zone0());
OperationManager operationManager = new OperationManager(auth, cfg);
String persistentId = "";
try {
persistentId = operationManager.pfop(bucket, key, persistentOpfs, persistentPipeline, persistentNotifyUrl, true);
System.out.println(persistentId);
OperationStatus operationStatus = operationManager.prefop(persistentId);
} catch (QiniuException e) {
System.err.println(e.response.toString());
}
return persistentId;
}