ckplayer
先看下实现的功能代码：
一个是上传，一个是读取：
/**
* 上传视频
*
* @param Filedata
* @param request
* @param fold
* @return
* @throws IOException
*/
@RequestMapping(value = "/upload", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
@ResponseBody
public String upload(MultipartFile Filedata, HttpServletRequest request, String fold) throws IOException {
String path = File.separator + Constants.COURSEWARE_DIR + File.separator + fold;
String fileName = Filedata.getOriginalFilename();
path += File.separator + fileName;
String realPath = handleContextRealPath(path, request);
FileUtils.copyInputStreamToFile(Filedata.getInputStream(), new File(realPath));
return path;
}
/**
* 查看资源
*
* @param id
* @return
*/
@RequestMapping("/{id}/show")
public String show(@PathVariable Long id, Model model, HttpServletRequest request,
RedirectAttributes redirectAttrs,@RequestParam(value = "page", required = false, defaultValue = "1" )int page) {
/*
* 根据目标视频的类型返回合适的资源定位
*/
Video video = this.videoService.findById(id);
String resourceUri = null;
//resourceUri = video.getDirPath();
resourceUri = video.getDirPath();
/*
* 无法访问进行提示
*/
if (null == video.getDirPath()) {
sendErrorMessageWhenRedirect(redirectAttrs, "resource.invaild");
return "redirect:"+request.getHeader("Referer");
}
model.addAttribute("type", video.getType());
model.addAttribute("resourceUri", resourceUri.replaceAll("\\\\", "/"));
model.addAttribute("video", video);
return "video/show";
}上传功能：http://blog.csdn.net/sunhuwh/article/details/27132171
<tr> <th>选择视频：</th> <td><input type="file" name="uploadify" id="uploadify" /> <h6>*只支持单个视频上传</h6> <div id="fileQueue"></div></td> </tr> <tr> <script src="<c:url value='/resources/js/upload/jquery.uploadify-3.1.min.js' />"></script> <script src="<c:url value='/resources/js/video/upload.js' />"></script> <script src="<c:url value="/resources/js/video/filters.js" />" type="text/javascript"></script> <script src="<c:url value="/resources/js/video/new.js" />" type="text/javascript"></script>
new.js:
$(function(){
prepareUpload("",1);
//提交表单
$("#submitBtn").click(function(){
if($("#dataForm").valid()){
if($("#fileQueue").text()!=''){
var date=new Date();
var fold=date.format("yyyyMMddhhmmss")+"_"+$("#name").val();
$("#uploadify").uploadify("settings","formData",{'fold':fold});
$('#uploadify').uploadify('upload','*');
}else{
//setVMessage("请选择要上传的课件！");
alert("请选择要上传的课件！");
}
}
});
});
Date.prototype.format = function(format){
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
}
}
return format;
}
function onSelect(file){
var fileName=file.name;
fileName=fileName.substring(0,fileName.lastIndexOf("."));
$("#name").val(fileName);
}
function onUploadSuccess(){
$("#dirPath").val(adjunctPath);
if(canSubmit){
document.dataForm.submit();
}
}
最重要的是upload.js，需要改变文件类型：
//附件的路径
var adjunctPath='';
//附件上传失败则不能保存
var canSubmit=true;
var uploadify=$("#uploadify");
var uploader="";
function getRootPath(){
var pathName=window.document.location.pathname;
//获取带"/"的项目名，如：/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(projectName);
}
function prepareUpload(uploadFold,size){
uploader=$("#uploadify").uploadify({
'auto' : false,
'swf' : getRootPath()+'/resources/js/upload/uploadify.swf',
'uploader' : getRootPath()+'/video/upload',
'formData' : {"fold":uploadFold},
'queueID' : 'fileQueue',//与下面的id对应
'queueSizeLimit' : size,
'buttonImage' : getRootPath()+'/resources/imgs/addFile.png',
'buttonText' : '添加课件',
'fileTypeDesc' : 'rar文件或zip文件',
'fileTypeExts' : '*.mp4;*.zip;*.flv;*.xls;*.doc;*.xlsx;*.f4v;', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
'multi' : true,
'cancel' : getRootPath()+'/resources/js/upload/uploadify-cancel.png',
'onUploadSuccess':function(file, data, response){//上传成功后获得回调函数,这里为了取得文件上传成功后的保存路径
// adjunctPath+=data+";";
adjunctPath+=data;
onUploadSuccess();
},
'onUploadError':function(file, errorCode, errorMsg, errorString){//上传错误的信息
canSubmit=false;
onUploadError();
},
'onQueueComplete' : function(queueData) {//上传队列全部完成后执行的回调函数
onQueueComplete();
},
'onSelect':function(file){
onSelect(file);
}
} );
}
有个技巧能够根据文件类型来进行视频的播放：
<p class="title"><r:a href="/courseware">视频</r:a>>${video.name }</p>
<div class="content">
<jsp:include page="page/type_video.jsp" />
<div class="clear"></div>
<div class="">
</div>
<div class="clear"></div>
</div>
我这里省略了，在page/type_video.jsp，其实可以改为page/type_${xx}.jsp
这个jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="r" uri="r-tag"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<script type="text/javascript">
function getRootPath(){
var pathName=window.document.location.pathname;
//获取带"/"的项目名，如：/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(projectName);
}
</script>
<input type="hidden" id="videoPath" value="${resourceUri }">
<div class="view" style="background: #E6E6E6;height: 400px;text-align: center;">
<div id="a1" class="text-center"></div>
</div>
<script src="<c:url value="/resources/js/ckplayer/ckplayer.js" />"></script>
<script type="text/javascript" charset="utf-8">
var flashvars = {
f : getRootPath()+"/" + $("#videoPath").val(),
c : 0,
b : 1,
x : ''
};
var params = {
bgcolor : '#FFF',
allowFullScreen : true,
allowScriptAccess : 'always'
};
CKobject.embedSWF(getRootPath() + '/resources/js/ckplayer/ckplayer.swf',
'a1', 'ckplayer_a1', '600', '400', flashvars, params);
</script>
是ckplayer播放器
支持流行视频格式flv，f4v，mp4，
支持html5格式m3u8,webm,ogg theora,mp4
${fn:toLowerCase(XX)}fn小写