You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
624 lines
20 KiB
624 lines
20 KiB
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>视频播放 - </title>
|
|
<
|
|
|
|
<link type="text/css" rel="stylesheet" href="/tourResource/css/iconfont.css">
|
|
|
|
<link type="text/css" rel="stylesheet" href="/oss/mainframe/css/css3.css">
|
|
<!--<link type="text/css" rel="stylesheet" href="/oss/mainframe/css/common.css">-->
|
|
<link type="text/css" rel="stylesheet" href="/oss/mainframe/css/skin.css" id="skin_user">
|
|
<link type="text/css" rel="stylesheet" href="/oss/mainframe/css/header.css" id="public_user">
|
|
|
|
|
|
<script type="text/javascript" src="/oss/mainframe/js/jquery-1.9.0-min.js"></script>
|
|
|
|
<script type="text/javascript" src="/oss/mainframe/js/kendo.custom.min.js"></script>
|
|
<script type="text/javascript" src="/oss/mainframe/js/kendo.tabstrip.min.js"></script>
|
|
<script type="text/javascript" src="/oss/mainframe/js/kendo.messages.zh-CN.min.js"></script>
|
|
<script type="text/javascript" src="/oss/mainframe/js/kendo.culture.zh-CN.min.js"></script>
|
|
<script type="text/javascript" src="/oss/mainframe/js/ext.js"></script>
|
|
<script type="text/javascript" src="/oss/mainframe/js/common.js"></script>
|
|
<script type="text/javascript" src="/oss/mainframe/js/util.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
if(window.location.protocol == 'https:'){
|
|
$("head").append('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<!--独立的 视频播放页面（树 + 播放）-->
|
|
<style scoped>
|
|
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#_center {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#_center .k-splitbar-horizontal {
|
|
width: 10px !important;
|
|
border-width: 0 0 0 1px !important;
|
|
}
|
|
|
|
#play_center {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.inline > label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ztree li span.button.rootIcon_ico_open, .ztree li span.button.rootIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/root.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.districtIcon_ico_open, .ztree li span.button.districtIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/district.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.scenicnoAIcon_ico_open, .ztree li span.button.scenicnoAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/0A.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.scenicAIcon_ico_open, .ztree li span.button.scenicAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/1A.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.scenicAAIcon_ico_open, .ztree li span.button.scenicAAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/2A.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.scenicAAAIcon_ico_open, .ztree li span.button.scenicAAAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/3A.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.scenicAAAAIcon_ico_open, .ztree li span.button.scenicAAAAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/4A.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.scenicAAAAAIcon_ico_open, .ztree li span.button.scenicAAAAAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/5A.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.hotelnoAIcon_ico_open, .ztree li span.button.hotelnoAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/0A-checked.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.hotelAIcon_ico_open, .ztree li span.button.hotelAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/1A-checked.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.hotelAAIcon_ico_open, .ztree li span.button.hotelAAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/2A-checked.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.hotelAAAIcon_ico_open, .ztree li span.button.hotelAAAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/3A-checked.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.hotelAAAAIcon_ico_open, .ztree li span.button.hotelAAAAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/4A-checked.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.hotelAAAAAIcon_ico_open, .ztree li span.button.hotelAAAAAIcon_ico_close {
|
|
margin-right: 2px;
|
|
background: url(/tourResource/images/video/5A-checked.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.issueIcon_ico_docu {
|
|
margin-right: 1px;
|
|
background: url(/tourResource/images/video/issue.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li span.button.normalIcon_ico_docu {
|
|
margin-right: 1px;
|
|
background: url(/tourResource/images/video/normal.png) no-repeat scroll 0 0 transparent;
|
|
vertical-align: top;
|
|
*vertical-align: middle
|
|
}
|
|
|
|
.ztree li a {
|
|
color: #fff !important;
|
|
}
|
|
|
|
#play_tool {
|
|
list-style: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 5px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
#play_tool li {
|
|
|
|
width: 46px;
|
|
height: 100%;
|
|
float: left;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#play_tool li:first-child {
|
|
background: url("/tourResource/images/video/grid-1.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(2) {
|
|
background: url("/tourResource/images/video/grid-4.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(3) {
|
|
background: url("/tourResource/images/video/grid-6.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(4) {
|
|
background: url("/tourResource/images/video/grid-16.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:first-child.active {
|
|
background: url("/tourResource/images/video/grid-1-active.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(2).active {
|
|
background: url("/tourResource/images/video/grid-4-active.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(3).active {
|
|
background: url("/tourResource/images/video/grid-6-active.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(4).active {
|
|
background: url("/tourResource/images/video/grid-16-active.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:first-child:hover {
|
|
background: url("/tourResource/images/video/grid-1-active.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(2):hover {
|
|
background: url("/tourResource/images/video/grid-4-active.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(3):hover {
|
|
background: url("/tourResource/images/video/grid-6-active.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
|
|
#play_tool li:nth-child(4):hover {
|
|
background: url("/tourResource/images/video/grid-16-active.png") no-repeat;
|
|
background-size: 35px 35px;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet"
|
|
href="/oss/tourism-projects/static/css/zTreeStyle.css">
|
|
<link type="text/css" rel="stylesheet"
|
|
href="/oss/screen/skins/static/plugins/playUtil/css/smartMenu.css">
|
|
<link type="text/css" rel="stylesheet"
|
|
href="/oss/screen/skins/static/plugins/playUtil/css/playerUtil.css">
|
|
<script src="/oss/screen/skins/static/plugins/playUtil/ckplayer/jquery-smartMenu.js"></script>
|
|
<script src="/oss/screen/skins/static/plugins/playUtil/ckplayer/ckplayer.js"></script>
|
|
<!--<script src="/oss/screen/skins/static/plugins/playUtil/ckplayer/playUtil_v2.js"></script>-->
|
|
<script src="/tourResource/js/video/playUtil_v2.js"></script>
|
|
<script src="/oss/tourism-projects/static/js/jquery.ztree.core.js"></script>
|
|
<script src="/oss/tourism-projects/static/js/jquery.slimscroll.min.js"></script>
|
|
<style>
|
|
.video-win {
|
|
background: rgba(0, 0, 0, .4);
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.video-win-record {
|
|
position: absolute;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.video-win-record-stop {
|
|
background: url(http://enjoy-skins.oss-cn-hangzhou.aliyuncs.com/screen/skins/static/plugins/playUtil/ckplayer/stop.png) no-repeat center center;
|
|
background-size: 20px 20px;
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 15px;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
|
|
.loading .gif {
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #15b2ff;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
.loading {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 60px;
|
|
left:calc(50% - 150px);
|
|
top:120px;
|
|
background: rgba(0,0,0,.3);
|
|
z-index: 999;
|
|
padding-top:5px;
|
|
border-radius: 10px;
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<link rel="stylesheet" href="/oss/tourism-projects/static/css/container.css">
|
|
<body style="background:url(/tourResource/images/bg.jpg)no-repeat;background-size:cover;">
|
|
<div class="div-container">
|
|
<style>
|
|
.logo-text-img{
|
|
float: left;
|
|
}
|
|
.second-logo-name{
|
|
float: left;
|
|
font-size: 26px;
|
|
font-family: "楷体";
|
|
color: #4cf3ff;
|
|
line-height: 50px;
|
|
}
|
|
.toggleShow{
|
|
display: block;
|
|
}
|
|
|
|
.ts_ul li span{
|
|
background: #4f9aff;
|
|
}
|
|
.p_1>a{
|
|
color: #ffa800;
|
|
}
|
|
.p_1>a>span{
|
|
background: #ffa800 !important;
|
|
}
|
|
.title-city-select {
|
|
float: right;
|
|
position: relative;
|
|
width: 120px;
|
|
margin-right: 15px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.title-city-select .city-active-name:after {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 12px;
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 8px solid #fff;
|
|
}
|
|
|
|
.title-city-select .city-active-name {
|
|
width: 120px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.title-city-select .city-option {
|
|
display: none;
|
|
position: absolute;
|
|
width: 260px;
|
|
border-radius: 3px;
|
|
left: -50%;
|
|
padding: 5px;
|
|
background: #2a558c;
|
|
}
|
|
|
|
.title-city-select .city-option li {
|
|
float: left;
|
|
padding: 3px 5px;
|
|
margin: 3px;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
width: 56px;
|
|
}
|
|
|
|
.title-city-select .city-option li.active {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.title-city-select .city-option li:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.show-box {
|
|
display: block !important;
|
|
transition: all .3s;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<img src="/tourResource/images/top/left_bg.png" class="bg_lf" alt="">
|
|
<img src="/tourResource/images/top/left_bg1.png" class="bg_lf1" alt="">
|
|
<img src="/tourResource/images/top/right_bg.png" class="bg_rt" alt="">
|
|
<div class="cont_top">
|
|
<div class="logo">
|
|
<span class="logo-img" ></span>
|
|
<span class="logo-text-img"></span>
|
|
<span class="second-logo-name" ></span>
|
|
</div>
|
|
<div class="nav_right">
|
|
|
|
|
|
|
|
</div>
|
|
<a href="## " class="top_link active">卫星地图</a>
|
|
<a href="##" class="top_link top_link1 top_link_right">数字地图</a>
|
|
</div>
|
|
<div id="search_nav"
|
|
style="position:fixed;top:30px;left:50%;margin-left:-28px;z-index:1000; display: none">
|
|
<!----> <div class="top_button"></div>
|
|
<div class="ts_lr" style="display:none;">
|
|
<div class="fr" id="search_ul" style="width:100%;position:relative;top:32px;left:20px;">
|
|
<ul class="ts_ul">
|
|
<li data-type="4"><a href="####" style="display: none"> <span></span>按日分析</a></li>
|
|
<li data-type="3" class="p_1" id="ts_ul_month"><a href="####"> <span></span>按月分析 </a></li>
|
|
<li data-type="1" id="ts_ul_year"><a href="####"> <span></span>按年分析</a></li>
|
|
<li data-type="10" id="ts_ul_date"><a href="####"> <span></span>按区段分析</a></li>
|
|
</ul>
|
|
<ul class="ts_list" id="app">
|
|
<li class="date-type" style="display: none;">
|
|
<input id="datepicker_day" name="date_input" title="datepicker" style="width:100px"/>
|
|
</li>
|
|
<li class="date-type">
|
|
<input id="datepicker_month" name="date_input" title="datepicker" style="width:100px"/>
|
|
</li>
|
|
<li class="date-type" style="display: none;">
|
|
<input id="datepicker_year" name="date_input" title="datepicker" style="width:100px"/>
|
|
</li>
|
|
<li class="date-type" style="width: 230px; display: none;">
|
|
<span style="margin-left: -12px;margin-right: 4px;">起</span><input id="datepicker_start" name="date_input" title="datepicker" style="width:100px"/>
|
|
<span style="margin-left: 4px;margin-right: 4px;">止</span><input id="datepicker_end" name="date_input" title="datepicker" style="width:100px"/>
|
|
</li>
|
|
<!--<li>
|
|
<input type="hidden" name="zoneCode" value="130000000000">
|
|
<input id="zoneCodeCity" style="width:90px;float: left"></input>
|
|
<!–<input id="zoneCodeCounty" style="width:90px;float: left"></input>–>
|
|
</li>-->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
<div style="overflow: hidden;padding-top: 104px;" class="change-bg">
|
|
|
|
|
|
<div id="_center" style="margin-right: 5%;height:calc(100vh - 145px);">
|
|
<div style="height: 100%;width:18%; overflow-y: auto;margin-left: 20px;float: left;border-right: 4px solid #fff;"
|
|
id="treelist_div">
|
|
<ul id="ztree" class="ztree">
|
|
|
|
</ul>
|
|
</div>
|
|
<div style="width: 80%;height:100%; padding: 10px;float: right;position: relative;" id="content-box">
|
|
<div style="height: 50px;width: 100%;" class="video-icon">
|
|
<ul id="play_tool">
|
|
<li title="1*1" onClick="setRowCol(1,1);"></li>
|
|
<li title="2*2" class="active" onClick="setRowCol(2,2);"></li>
|
|
<li title="3*3" onClick="setRowCol(3,3);"></li>
|
|
<!--<li title="4*4" onClick="setRowCol(4,4);"></li>-->
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!---关键部位-->
|
|
<div id="video-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
var totalNum = 4;
|
|
$(function () {
|
|
initVideo();
|
|
$("#play_tool li").click(function () {
|
|
var index = $(this).index();
|
|
$("#play_tool").find("li").removeClass("active");
|
|
$("#play_tool").find("li").eq(index).addClass("active");
|
|
});
|
|
});
|
|
|
|
function initVideo() {
|
|
if (I_CheckPluginVersion()) {//检查是否安装或者flash
|
|
var playerDirectory = "/tourResource/";
|
|
var directory = "/oss/screen/skins/static/plugins/playUtil/";
|
|
setDirectory(directory);
|
|
setPlayerDirectory(playerDirectory);
|
|
var options = {
|
|
topElementId: "video-content",
|
|
elementId: "video-content",
|
|
maxRow: 4,
|
|
maxColumn: 4,
|
|
szWidth: '100%',
|
|
szHeight: 'calc(100% - 50px)',
|
|
subBorder: '#fff',
|
|
panelAppendHTML: '<div class="video-win"><div class="video-win-record video-win-content"></div><div class="video-win-title video-win-content"></div></div>'
|
|
// videoScale: "4:3,16:9,满屏"
|
|
};
|
|
I_initPlugin(options);
|
|
I_stylePlayer({row: 2, column: 2});
|
|
totalNum = 4;
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
/******Ztree Start ******/
|
|
function asyncLoadData() {
|
|
var setting = {
|
|
view: {
|
|
showTitle: true,
|
|
showIcon: true,
|
|
showLine: true,
|
|
nameIsHTML: true,
|
|
fontCss: {size: 50},
|
|
dblClickExpand: false
|
|
},
|
|
async: {
|
|
enable: true,
|
|
url: 'http://localhost:10008/video/tree.json',
|
|
type: "get",
|
|
autoParam: ["id"], //自动提交的参数
|
|
// dataFilter: filter
|
|
},
|
|
callback: {
|
|
onClick: zTreeOnClick,
|
|
onRightClick: zTreeOnRightClick,
|
|
// onDblClick: zTreeOnDblClick,
|
|
onAsyncSuccess: onAsyncSuccess
|
|
}
|
|
};
|
|
$.fn.zTree.init($("#ztree"), setting);
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.menu_nav{
|
|
position: absolute;
|
|
bottom:0;
|
|
}
|
|
.accordion_li{
|
|
height:30px;
|
|
}
|
|
.accordion{
|
|
position: relative;
|
|
}
|
|
.secondary-menu{
|
|
position: absolute;
|
|
left:196px;
|
|
top:0;
|
|
border: 1px solid #00B5FF;
|
|
width:175px;
|
|
height:100%;
|
|
font-size: 14px;
|
|
background: rgba(12,23,69,.5);
|
|
display: none;
|
|
}
|
|
.secondary-menu li{
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
.down-jt{
|
|
/*position: relative;*/
|
|
}
|
|
.down-jt:after{
|
|
content: '>';
|
|
float: right;
|
|
margin-top: -26px;
|
|
margin-right: 8px;
|
|
|
|
}
|
|
.hover{
|
|
background: url(/oss/mainframe/images/top/hover_bg.png)no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.secondary-menu li a{display: block;}
|
|
.secondary-menu li:hover,.secondary-menu li.active{
|
|
/*background: rgba(39,89,147,.5);*/
|
|
background: url(/oss/mainframe/images/top/hover_bg.png)no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|