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小写

你可能感兴趣的:(ckplayer)