最近有需求要做一个资料上传的页面,资料包含图片,视频,办公文档等,其他都好做,视频因为和jeesite框架冲突,最后找了video.js来做,先说一下坑吧
1,开始视频老是播放不出来,最后发现因为自己吧AVI后缀直接改成MP4所以播放不出来,用原装MP4就可以了,其他直接按照案列来就好了,下载地址:http://www.jq22.com/jquery-info404
2出来样式
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<link href="${ctxStatic}/video.js/css/video-js.min.css" rel="stylesheet">
<!-- <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet"> -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<%-- <script src="${ctxStatic}/video.js/ie8/videojs-ie8.min.js"></script> --%>
<!-- <script>videojs.options.flash.swf = "${ctxStatic}/video.js/js/video-js.swf";</script> -->
<title>活动管理</title>
<meta name="decorator" content="default"/>
<script type="text/javascript">
$(document).ready(function() {
});
function page(n,s){
$("#pageNo").val(n);
$("#pageSize").val(z);
$("#searchForm").submit();
return false;
}
</script>
</head>
<body>
<form:form id="searchForm" modelAttribute="hgRlzyActivity" action="${ctx}/activity/hgRlzyActivity/" method="post" class="breadcrumb form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
</form:form>
<sys:message content="${message}"/>
<table width='100%' border='0' cellspacing='0' cellpadding='5'>
<tr align='center'>
<c:forEach var="photo" items="${page.list}" varStatus="status">
<c:choose>
<c:when test="${status.count % 4 == 0}">
<td width='25%'>
<table border=1 align=center cellpadding=3 cellspacing=1 bordercolor="#666666" bgcolor='#ffffff' class='bk1'>
<tr>
<td align="center">
<c:choose>
<c:when test="${fn:contains(photo.name,'.pdf')}">
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/pdf.jpg" width=200 height=113 border='0' align="middle"> </a>
</c:when>
<c:when test="${fn:contains(photo.name,'.docx')}">
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/word.jpg" width=200 height=113 border='0' align="middle"> </a>
</c:when>
<c:when test="${fn:contains(photo.name,'.pptx')}">
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/ppt.jpg" width=200 height=113 border='0' align="middle"> </a>
</c:when>
<c:when test="${fn:contains(photo.name,'.mp4')}">
<%-- <a href="${photo.path}" onclick="sum('${photo.id}')" download="${photo.name}" width=150 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/shipin.jpg" width=150 height=113 border='0' align="middle"> </a> --%>
<video onended="a('${photo.id}1')" id="${photo.id}1" class="video-js" controls preload="auto" width="200" height="200" data-setup="{}">
<%-- poster="${ctxStatic}/country/shipin.jpg" --%>
<source src="${photo.path}" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</c:when>
<c:when test="${fn:contains(photo.name,'.mp3')}">
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/yinpin.jpg" width=200 height=113 border='0' align="middle"> </a>
</c:when>
<c:otherwise>
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${photo.path}" width=200 height=113 border='0' align="middle"> </a>
</c:otherwise>
</c:choose>
</td>
</tr>
</table><br>
下载:<a href="${photo.path}" download="${photo.name}" onclick="sum('${photo.id}')" >${photo.name}</a> <br>用户:${photo.createBy.name} | 点击：<input type="text" id="${photo.id}" disabled="true" value="${photo.browsenumber}" style="width: 20px" >
</td>
<c:out value="</tr>" escapeXml="false" />
<c:out value="<tr align='center'>" escapeXml="false" />
</c:when>
<c:otherwise>
<td width='25%'>
<table border=1 align=center cellpadding=3 cellspacing=1 bordercolor="#666666" bgcolor='#ffffff' class='bk1'>
<tr>
<td align="center">
<c:choose>
<c:when test="${fn:contains(photo.name,'.pdf')}">
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/pdf.jpg" width=200 height=113 border='0' align="middle"> </a>
</c:when>
<c:when test="${fn:contains(photo.name,'.docx')}">
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/word.jpg" width=200 height=113 border='0' align="middle"> </a>
</c:when>
<c:when test="${fn:contains(photo.name,'.pptx')}">
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/ppt.jpg" width=200 height=113 border='0' align="middle"> </a>
</c:when>
<c:when test="${fn:contains(photo.name,'.mp4')}">
<%-- <a href="${photo.path}" onclick="sum('${photo.id}')" download="${photo.name}" width=150 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/shipin.jpg" width=150 height=113 border='0' align="middle"> </a> --%>
<video onended="a('${photo.id}1')" id="${photo.id}1" class="video-js" controls preload="auto" width="200" height="200" data-setup="{}">
<%-- poster="${ctxStatic}/country/shipin.jpg" --%>
<source src="${photo.path}" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</c:when>
<c:when test="${fn:contains(photo.name,'.mp3')}">
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/yinpin.jpg" width=200 height=113 border='0' align="middle"> </a>
</c:when>
<c:otherwise>
<a href="${photo.path}" onclick="sum('${photo.id}')" width=200 height=113 border='0' align="middle" class='bk1'><img src="${photo.path}" width=200 height=113 border='0' align="middle"> </a>
</c:otherwise>
</c:choose>
</td>
</tr>
</table><br>
下载:<a href="${photo.path}" download="${photo.name}" onclick="sum('${photo.id}')">${photo.name}</a> <br>用户:${photo.createBy.name} | 点击：<input type="text" id="${photo.id}" disabled="true" value="${photo.browsenumber}" style="width: 20px" >
</td>
</c:otherwise>
</c:choose>
</c:forEach>
</tr>
</table>
<div class="pagination">${page}</div>
<script src="${ctxStatic}/video.js/js/video.min.js"></script>
<!-- <script src="https://vjs.zencdn.net/7.0.3/video.js"></script> -->
<script type="text/javascript">
function sum(id) {
var a=Number($("#"+id).val())+1;
$("#"+id).val(a);
id=id+","+a;
$.ajax({
type:"post",
async:true,
url:"${ctx}/activity/hgRlzyActivity/upBrowse?actidataId="+id,
dataType:"json",
success: function(data) {
},
error: function(data) {
}
})
}
//视频点击事件,视频结束点击量+1
function a(id) {
var id1=id.substring(0,id.length-1);
alert(id+"==="+id1);
sum(id1);
}
</script>
</body>
</html>