mirror of https://gitee.com/zhang_1334717033/kiftd
增加了MP4和webm格式视频的在线播放功能
青阳龙野
parent
816078b30e
commit
b996b2ee3f
Binary file not shown.
|
|
@ -1,5 +1,5 @@
|
|||
#Generated by Maven Integration for Eclipse
|
||||
#Thu Jan 25 10:25:31 CST 2018
|
||||
#Tue Jan 30 15:53:37 CST 2018
|
||||
version=0.0.1-SNAPSHOT
|
||||
groupId=kohgylw
|
||||
m2e.projectName=KohgylwIFT
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,73 @@
|
|||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%
|
||||
String path = request.getContextPath();
|
||||
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
||||
+ path + "/";
|
||||
%>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<base href="<%=basePath%>">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>KPlayer</title>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/overrall.min.css">
|
||||
<link rel="stylesheet" href="css/video-js.min.css">
|
||||
<link rel="icon" type="image/x-icon" href="css/player.png" />
|
||||
<script type="text/javascript" src="js/videojs-ie8.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%-- 中央布局 --%>
|
||||
<div class="container">
|
||||
|
||||
<%-- 头部 --%>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="titlebox">
|
||||
<span class="titletext"><em> 青阳网络视频播放器 <small><span
|
||||
class="graytext">KIFT-Player</span></small></em></span>
|
||||
<button class="btn btn-link rightbtn" onclick="reMainPage()">
|
||||
返回 <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
<%-- end 头部 --%>
|
||||
|
||||
<%-- 主体 --%>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p class="subtitle">视频名称：${video.fileName }</p>
|
||||
<p class="subtitle">${video.fileCreator }/${video.fileCreationDate }/${video.fileSize } MB</p>
|
||||
<br />
|
||||
<!-- 播放窗口组件位置 -->
|
||||
<video id="kiftplayer" class="video-js col-md-12" controls
|
||||
preload="auto" height="500">
|
||||
<source src="fileblocks/${video.filePath }" type="video/mp4">
|
||||
<source src="fileblocks/${video.filePath }" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<%-- end 主体 --%>
|
||||
|
||||
</div>
|
||||
<%-- end 中央布局 --%>
|
||||
|
||||
</body>
|
||||
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="js/video.js"></script>
|
||||
<script type="text/javascript">
|
||||
var player = videojs('kiftplayer');
|
||||
player.ready(function() {
|
||||
this.play();
|
||||
});
|
||||
function reMainPage(){
|
||||
window.location.href="home.jsp";
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 893 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -360,7 +360,7 @@
|
|||
</div>
|
||||
<%-- end 修改文件夹模态框 --%>
|
||||
</body>
|
||||
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
|
||||
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="js/home.min.js"></script>
|
||||
</html>
|
||||
|
|
@ -291,6 +291,15 @@ function showFolderTable(folderView) {
|
|||
+ fi.fileName
|
||||
+ '"'
|
||||
+ ")' class='btn btn-link btn-xs'><span class='glyphicon glyphicon-cloud-download'></span> 下载</button>";
|
||||
console.log("获取的后缀名为："+getSuffix(fi.fileName));
|
||||
if (getSuffix(fi.fileName) == "mp4" || getSuffix(fi.fileName) == "webm") {
|
||||
fileRow = fileRow
|
||||
+ "<button onclick='playVideo("
|
||||
+ '"'
|
||||
+ fi.fileId
|
||||
+ '"'
|
||||
+ ")' class='btn btn-link btn-xs'><span class='glyphicon glyphicon-play'></span> 播放</button>";
|
||||
}
|
||||
}
|
||||
if (aD) {
|
||||
fileRow = fileRow
|
||||
|
|
@ -762,4 +771,17 @@ function abortUpload() {
|
|||
xhr.abort();
|
||||
}
|
||||
$('#uploadFileModal').modal('hide');
|
||||
}
|
||||
|
||||
// 获取文件名的后缀名
|
||||
function getSuffix(filename) {
|
||||
var index1 = filename.lastIndexOf(".");
|
||||
var index2 = filename.length;
|
||||
var suffix = filename.substring(index1 + 1, index2);
|
||||
return suffix;
|
||||
}
|
||||
|
||||
//播放指定格式的视频
|
||||
function playVideo(fileId){
|
||||
window.location.href="homeController/playVideo.do?fileId="+fileId;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue