kiftd/webContext/quickview/video.html

118 lines
3.3 KiB
HTML
Raw Normal View History

2018-07-26 03:51:45 +00:00
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
2018-09-29 03:06:10 +00:00
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
2018-07-26 03:51:45 +00:00
<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" />
<!--[if lt IE 9]>
<script type="text/javascript" src="js/videojs-ie8.min.js"></script>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</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>
<div class="row">
<div class="col-md-12">
<p class="subtitle">
视频名称:<span id="vname">加载中...</span>
</p>
<p class="subtitle">
<span id="vcreator">加载中...</span>/<span id="vcdate">加载中...</span>/<span
id="vsize">加载中...</span> MB
</p>
<br />
<!-- 播放窗口组件位置 -->
<div id="playerbox" class="col-md-12">
<p>加载中...</p>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
2018-07-30 07:18:56 +00:00
<script type="text/javascript" src="js/video.min.js"></script>
2018-07-26 03:51:45 +00:00
<script type="text/javascript">
$(function() {
var fileId = getFileId();
$.ajax({
url : 'homeController/playVideo.ajax',
type : 'POST',
dataType : 'text',
data : {
fileId : fileId
},
success : function(result) {
if (result != "ERROR") {
var f = eval("(" + result + ")");
playVideo(f);
} else {
alert("错误:无法定位要预览的文件或该操作未被授权。");
reMainPage();
}
},
error : function() {
alert("错误:请求失败,请刷新重试。");
reMainPage();
}
});
});
//获取URL上的图片id参数它必须是第一个参数。
function getFileId() {
var url = location.search;
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("=");
return strs[1];
}
return "";
}
//显示视屏信息并播放视频
function playVideo(f) {
$("#vname").text(f.fileName);
$("#vcreator").text(f.fileCreator);
$("#vcdate").text(f.fileCreationDate);
$("#vsize").text(f.fileSize);
$("#playerbox")
.html(
"<video id='kiftplayer' class='video-js col-md-12' controls preload='auto' height='500'>"
+ "<source src='fileblocks/"+f.filePath+"' type='video/mp4'>"
+ "<source src='fileblocks/"+f.filePath+"' type='video/webm'>"
+ "</video>");
var player = videojs('kiftplayer');
player.ready(function() {
this.play();
});
}
function reMainPage() {
window.opener = null;
window.open('', '_self');
window.close();
}
</script>
</html>