移动新ui
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.
 
 
 
 
hb_cyjc_yd/WebRoot/hbcyjc/video/bigdata_index.jsp

1507 lines
51 KiB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/ctx.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html xmls="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>视频播放 - </title>
<script type="text/javascript" src="${ctx }/js/jquery-3.7.0.min.js"></script>
<script src="${ctx }/hbcyjc/resource/js/layer/layer.js"></script>
<script>
if(window.location.protocol == 'https:'){
$("head").append('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
}
var region = '${region}';
var picSrc = '';
if(region == '131100'){
picSrc = 'ckplayer/video-bg.png'; //京东云图标
}else if(region == '131024'){
picSrc = 'ckplayer/spbj03.jpg'; // 点点点点 图标
}else if(region === '130724'){
// 沽源 视频 logo
picSrc = 'ckplayer/video-bg-guyuan.png'; //坝上沽源图标
}else if(region === '131124'){
//饶阳logo
picSrc = 'ckplayer/spbj03.jpg'; //点点点点 图标
}else if (region==='130100'){
picSrc = 'ckplayer/video-bg-shijiazhuang.png' //滹沱河生态走廊 图标
}else if (region==='130630'){
picSrc = 'ckplayer/video-bg3.png' //创巨圆图标
}else if(region==='139900'||region==='139901'||region==='139902'||region==='139903'){
picSrc = 'ckplayer/spbj03.jpg'; //点点点点 图标
}
else{
picSrc = 'ckplayer/video-bg2019年6月13日111215.png'; //联通图标
}
var retuserlogopath = '${retuserlogopath}'; //配置的logo路径
if(retuserlogopath!=null && retuserlogopath!= "" && retuserlogopath!= undefined && retuserlogopath!= "undefined"){
picSrc = retuserlogopath;
}
</script>
<!-- 字体图标 -->
<link href="${ctx}/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="${ctx}/assets/ionicon/css/ionicons.min.css" rel="stylesheet"/>
<link href="${ctx}/css/material-design-iconic-font.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="${ctx }/hbcyjc/resource/css/cjy_style.css" />
<link type="text/css" rel="stylesheet" href="${ctx }/hbcyjc/resourceNew/css/cjy_style.css"/>
<link type="text/css" rel="stylesheet" href="${ctx }/hbcyjc/resourceNew/css/cjy_style2.css" />
<link type="text/css" rel="stylesheet" href="${ctx }/hbcyjc/resourceNew/css/cjy_zlmxg.css" />
<!--独立的 视频播放页面(树 + 播放)-->
<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="${ctx }/oss/tourism-projects/static/css/zTreeStyle.css">
<link type="text/css" rel="stylesheet"
href="${ctx }/oss/screen/skins/static/plugins/playUtil/css/playerUtil.css">
<script src="${ctx }/oss/screen/skins/static/plugins/playUtil/ckplayer/jquery-smartMenu.js"></script>
<script src="${ctx }/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="${ctx }/tourResource/js/video/playUtil_v2.js"></script>
<script src="${ctx }/oss/tourism-projects/static/js/jquery.ztree.core.js"></script>
<script src="${ctx }/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>
<style>
/*顶部导航条*/
.navfloat-l {
width: 100%;
height: 5px;
filter: Alpha(opacity=0);
opacity: 0;
position: fixed;
top: 0;
z-index: 99;
}
.header-l {
position: absolute;
top: 0px;
left: 0;
z-index: 9999;
width: 100%;
height: 80px;
background-color: #0071C6;
background: #0F124F;
box-shadow: 1px 2px 10px #000;
}
.navbar-logo {
display: block;
padding: 15px 15px;
}
.navbar-header {
padding: 0px 10px;
padding-right: 20px;
}
.navbar-header .user-info {
color: #C3D7EE;
font-size: 14px;
text-align: center;
font-weight: bold;
margin-bottom: 0px;
float: left;
padding-top: 15px;
}
.navbar-header .user-info span {
display: block;
width: 30px;
height: 30px;
background: url(https://bigd.mimk.cn/feature/scenicV2/img/yhm.png) no-repeat center;
margin: 0px auto;
margin-bottom: 3px;
}
.navbar-header .tuichu {
display: block;
text-align: center;
color: #0ff;
font-size: 14px;
float: left;
width: 80px;
height: 65px;
padding-top: 15px;
margin-left: 10px;
}
.navbar-header .tuichu:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url(https://bigd.mimk.cn/feature/scenicV2/img/tuichu.png) no-repeat center;
margin: 0px auto;
margin-bottom: 3px;
}
.navbar-header .tuichu:hover {
background: rgba(217, 21, 114, 0.4);
}
.nav-dh {
margin: 0px 20px;
margin-left: 120px;
}
.nav-dh a {
display: block;
float: left;
height: 80px;
padding: 0px 15px;
margin-right: 1px;
color: #AABCD5;
text-align: center;
min-width: 64px;
}
.nav-dh a:hover,
.nav-dh .on {
background: url(https://bigd.mimk.cn/feature/scenicV2/img/dhbj_on.png) repeat;
color: #0ff;
text-decoration: none;
}
.nav-dh a .icon {
display: block;
width: 34px;
height: 34px;
margin: 0px auto;
margin-top: 15px;
margin-bottom: 3px;
background: url(https://bigd.mimk.cn/feature/scenicV2/img/icon_dl.png) no-repeat;
overflow: hidden;
}
.nav-dh .on .icon {
background: url(https://bigd.mimk.cn/feature/scenicV2/img/icon_dl2.png) no-repeat;
}
.nav-dh a .icon-zhzs,
.nav-dh .on .icon-zhzs {
background-position: 2px 0px;
}
.nav-dh a .icon-dlxx,
.nav-dh .on .icon-dlxx {
background-position: -123px 0px;
}
.nav-dh a .icon-jczy,
.nav-dh .on .icon-jczy {
background-position: -235px 0px;
}
.nav-dh a .icon-zhspjk,
.nav-dh .on .icon-zhspjk {
background-position: -355px 0px;
}
.nav-dh a .icon-jqkljc,
.nav-dh .on .icon-jqkljc {
background-position: -487px 0px;
}
.nav-dh a .icon-clljc,
.nav-dh .on .icon-clljc {
background-position: -608px 0px;
}
.nav-dh a .icon-lytsfx,
.nav-dh .on .icon-lytsfx {
background-position: -732px 0px;
}
.nav-dh a .icon-wlpjfx,
.nav-dh .on .icon-wlpjfx {
background-position: -864px 0px;
}
.nav-dh a .icon-dyjcfx,
.nav-dh .on .icon-dyjcfx {
background-position: -1004px 0px;
}
.nav-dh a p {
font-size: 15px;
color: #BDCDF8;
}
.nav-dh .on p {
color: #00FFFF;
}
/*左侧菜单*/
.but {
position: absolute;
right: -17px;
top: 50%;
margin-top: -40px;
width: 15px;
height: 80px;
background: #003A8A url(https://bigd.mimk.cn/feature/scenicV2/img/zhzs_ssjt.png) no-repeat center ;
border: 1px solid #033278;
}
.but.jtzh {
background: #003A8A url(https://bigd.mimk.cn/feature/scenicV2/img/zhzs_ssjt2.png) no-repeat center;
}
.cbp-spmenu {
background: #001246 url(https://bigd.mimk.cn/feature/scenicV2/img/cdbt_bj.jpg) center 20px no-repeat;
position: fixed;
border: 1px solid #033278;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
.cbp-spmenu:before {
content: "";
display: block;
position: absolute;
top: -3px;
right: -3px;
width: 15px;
height: 15px;
background: url(https://bigd.mimk.cn/feature/scenicV2/img/zsj_r.png) no-repeat center;
}
.cbp-spmenu:after {
content: "";
display: block;
position: absolute;
bottom: -3px;
right: -3px;
width: 15px;
height: 15px;
background: url(https://bigd.mimk.cn/feature/scenicV2/img/zxj_r.png) no-repeat center;
}
.cbp-spmenu h3 {
color: #fff;
font-size: 20px;
height: 100px;
line-height: 105px;
text-align: center;
margin: 0;
font-weight: 600;
}
.cbp-spmenu h3:before {
content: "";
display: inline-block;
width: 34px;
height: 34px;
background: url(https://bigd.mimk.cn/feature/scenicV2/img/zhzs.png) no-repeat center ;
position: relative;
top: 8px;
}
.cbp-spmenu a {
display: block;
color: #B8B8C4;
font-size: 14px;
font-weight: 300;
}
.cbp-spmenu a:hover {
color: #fff;
}
.cbp-spmenu .on {
color: #0ff;
}
.cbp-spmenu-vertical {
width: 160px;
height: auto;
top: 140px;
z-index: 1000;
padding: 10px;
padding-bottom: 40px;
}
.cbp-spmenu-vertical a {
border-bottom: 1px dashed #03428D;
padding: 10px;
}
.cbp-spmenu-left {
left: -160px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}
.cbp-spmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.cbp-spmenu-push-toleft {
left: -182px;
}
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav_icon_z {
display: inline-block;
width: 18px;
height: 18px;
background: url(/feature/scenicV2/img/icon_cd.png) no-repeat center top;
margin-right: 5px;
position: relative;
top: 5px;
}
.cbp-spmenu .on .nav_icon_z {
background: url(/feature/scenicV2/img/icon_cd2.png) no-repeat center top;
}
.nav_icon_z.icon_home {
background-position: center 0px;
}
.nav_icon_z.icon_kll {
background-position: center -47px;
}
.nav_icon_z.icon_jczy {
background-position: center -95px;
}
.nav_icon_z.icon_wpfx {
background-position: center -139px;
}
.nav_icon_z.icon_tsfx {
background-position: center -183px;
}
.nav_icon_z.icon_jkgl {
background-position: center -228px;
}
.nav_icon_z.icon_youke {
background-position: center -272px;
}
.nav_icon_z.icon_jingqu {
background-position: center -317px;
}
</style>
</head>
<body>
<div class="header">
<h3 class="header_bt">综合视频监控</h3>
<%--<a href="#" class="nav" id="showLeft"><i class="nav_icon icon_caidan"></i>菜单</a>
<a href="${ctx }/bigdata/index.jsp" class="nav_home"><i class="nav_icon icon_zhuye"></i>首页</a>--%>
</div>
<div class="navfloat-l"></div>
<div class="header-l" style="top: -90px;">
<div class="navbar-logo left" id="userlogo"><a href="#" class="navbar-brand"><img style="height:55px;" src="/feature/scenicV2/img/logo_lt.png"></a></div><!-- /.navbar-header -->
<div class="nav-dh left" id="lycyjccd"><a href="https://cjycyjc.mimk.cn" target="_self">
<span class="icon icon-zhzs"></span>
<p>首页</p>
</a>
<a href="https://cjycyjc.mimk.cn/lydlxxxt/gotoindexpage.do" target="_self">
<span class="icon icon-dlxx"></span>
<p>旅游地理信息系统</p>
</a>
<a href="https://cjycyjc.mimk.cn/lyscenicbasic/searchLyScenicBasicList.do" target="_self">
<span class="icon icon-jczy"></span>
<p>旅游基础资源维护系统</p>
</a>
<a href="https://cjycyjc.mimk.cn/zhspjkvideomanage/tozhspjklist.do" target="_self">
<span class="icon icon-zhspjk"></span>
<p>综合视频监控系统</p>
</a><a href="https://cjycyjc.mimk.cn/hbcyjc/kll/kll_currtime.jsp" target="_self">
<span class="icon icon-jqkljc"></span>
<p>景区客流量监控系统</p>
</a><a href="https://cjycyjc.mimk.cn/yjgljcjgl/searchYjglJcjglList.do" target="_self">
<span class="icon icon-yjzh"></span>
<p>应急指挥</p>
</a><a href="https://cjycyjc.mimk.cn/tsfxstat/index.do" target="_self">
<span class="icon icon-lytsfx"></span>
<p>旅游投诉分析系统</p>
</a><a href="https://cjycyjc.mimk.cn/allanalysis/gotoAllList.do" target="_self">
<span class="icon undefined"></span>
<p>网络评价分析系统</p>
</a><a href="https://cjycyjc.mimk.cn/hbcyjc/shop/shop.jsp" target="_self">
<span class="icon undefined"></span>
<p>商城数据分析系统</p>
</a></div>
<div class="navbar-header right" role="navigation">
<a href="javascript:logout()" class="tuichu">退出</a>
</div>
</div>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<div class="but" id="showleft"></div><h3>综合展示</h3>
<a class="" href="https://bigd.mimk.cn/index"><i class="nav_icon_z icon_home"></i>首页</a>
<a class="" href="https://bigd.mimk.cn/bigdata/basicresources/basicresources.jsp"><i class="nav_icon_z icon_jczy"></i>基础资源展示</a>
<a class="" href="https://bigd.mimk.cn/bigdata/interreview/network_all.jsp"><i class="nav_icon_z icon_wpfx"></i>旅游网评展示</a>
<a class="" href="https://bigd.mimk.cn/bigdata/region/130724/kll/index.jsp"><i class="nav_icon_z undefined"></i>客流量监测</a>
<a class="on" href="https://cjycyjc.mimk.cn/zhspjkvideomanage/toBigdatazhspjklist.do"><i class="nav_icon_z undefined"></i>综合视频监控</a>
</nav>
<input type="hidden" id="region" value="${region }" />
<div class="xingk"></div>
<div 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;">
<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>
<script type="text/javascript">
var html = "<a href=\"${ctx}/zhspjkvideomanage/tozhspjklist.do\" class=\"caid_xiang active\">视频播放</a>" +
"<a href=\"${ctx}/zhspjkvideomanage/searchZhspjkVideoManageList.do\" class=\"caid_xiang \">视频管理</a>";
$("#menuList").html(html);
var totalNum = 4;
$(function () {
initVideo();
//asyncLoadData();
$("#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;
//自定义播放器右键
var rightMenuData = [
[{
text: "全屏播放",
iconUrl: '${ctx }/hbcyjc/video/img/iconb_qpbf.png',
// iconUrl: '/oss/bigscreen/video/images/close-player.png',
func: function () {
I_FullScreen();
}
}, {
text: "关闭播放",
iconUrl: '${ctx }/hbcyjc/video/img/iconb_gbbf.png',
func: function () {
I_Stop();
}
}, {
text: "全部关闭",
iconUrl: '${ctx }/hbcyjc/video/img/iconb_qbgb.png',
// iconUrl: '/oss/bigscreen/video/images/all-close-player.png',
func: function () {
I_StopAll();
}
},
{
text: '多窗口全屏播放',
iconUrl: '${ctx }/hbcyjc/video/img/iconb_dckbf.png',
func: function () {
I_MultiFullScreen();
}
}, {
text: '重新连接',
iconUrl: '${ctx }/hbcyjc/video/img/iconb_cxlj.png',
func: function () {
I_Reconnect();
}
},
{
text: '按比例播放',
iconUrl: '${ctx }/hbcyjc/video/img/iconb_ablbf.png',
data: [
[
{
text: '满屏',
func: function () {
I_setPlayerResize();
}
},
{
text: '4:3',
func: function () {
I_setPlayerResize(4, 3);
}
},
{
text: '16:9',
func: function () {
I_setPlayerResize(16, 9);
}
},
{
text: '自定义',
className: 'smart_disabled'//鼠标不可点击啊添加此属性
}
]
]
},
{
text: "清晰度",
iconUrl: '${ctx }/hbcyjc/video/img/iconb_qxd.png',
data: [
[
{
text: '标清',
func: function () {
I_setDefinition(0);
}
},
{
text: '高清',
func: function () {
I_setDefinition(1);
}
}
]
]
},
{
text: "取消"
}
],
// [
// {
// text: "取消"
// }
// ]
];
//自定义播放器右键
var rightMenuWithRecordData = [
[
{
text: "全屏播放",
iconUrl: '/oss/bigscreen/video/images/if-full-screen.png',
func: function () {
I_FullScreen();
}
},
{
text: "关闭播放",
iconUrl: '/oss/bigscreen/video/images/close-player.png',
func: function () {
I_Stop();
}
},
{
text: "全部关闭",
iconUrl: '/oss/bigscreen/video/images/all-close-player.png',
func: function () {
I_StopAll();
}
},
{
text: '多窗口全屏播放',
iconUrl: '/oss/bigscreen/video/images/mul-screen.png',
func: function () {
I_MultiFullScreen();
}
},
{
text: '重新连接',
iconUrl: '/oss/bigscreen/video/images/reconnection.png',
func: function () {
I_Reconnect();
}
},
{
text: '按比例播放',
iconUrl: '/oss/bigscreen/video/images/mul-screen.png',
data: [
[
{
text: '满屏',
func: function () {
I_setPlayerResize();
}
},
{
text: '4:3',
func: function () {
I_setPlayerResize(4, 3);
}
},
{
text: '16:9',
func: function () {
I_setPlayerResize(16, 9);
}
},
{
text: '自定义',
className: 'smart_disabled'//鼠标不可点击啊添加此属性
}
]
]
},
{
text: "清晰度",
iconUrl: '/oss/bigscreen/video/images/definition.png',
data: [
[
{
text: '标清',
func: function () {
I_setDefinition(0);
}
},
{
text: '高清',
func: function () {
I_setDefinition(1);
}
}
]
]
},
{
text: "录制视频",
iconUrl: '/oss/bigscreen/video/images/record_video.png',
func: function () {
I_StartRecordVideo()
}
},
{
text: "视频截图",
iconUrl: '/oss/bigscreen/video/images/screenShot.png',
func: function () {
I_StartShotVideo()
}
}
],
[
{
text: "取消"
}
]
];
if ("0" && "0" == 1) {
I_initRightMenu(rightMenuWithRecordData);
}else {
I_initRightMenu(rightMenuData);
}
}
else document.write('<div id="flushNOWarn" style="color: rgb(0, 102, 204); text-align: center;">您没有安装flash插件,无法播放视频,<a href="http://www.macromedia.com/go/getflashplayer" target="_blank">请点击此处下载安装最新的flash插件</a></div>');
}
// function I_RecordVideo(url, recordMinutes, iWndIndex) {
// iWndIndex = iWndIndex || smart_currentRightMenuIndex;
// alert(iWndIndex);
// }
function getDetailPlayVideo() {
$.ajax({
type: "get",
url: "/tapi/video/getDetailPlayVideo",
success: function (data) {
var playNum = 0;
for (var index = 0; index < data.length; index++) {
var obj = data[index];
if (index < totalNum && obj.rtmpAddress) {
play(obj.rtmpAddress, index);
playNum++;
}
}
},
error: function () {
notify("获取默认播放的资源错误", "error", true);
}
});
}
</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:8080/video/tree.json',
type: "get",
autoParam: ["id"], //自动提交的参数
// dataFilter: filter
},
callback: {
onClick: zTreeOnClick,
onRightClick: zTreeOnRightClick,
// onDblClick: zTreeOnDblClick,
onAsyncSuccess: onAsyncSuccess
}
};
$.fn.zTree.init($("#ztree"), setting);
}******/
$(document).ready(function(){
initMyZtree();
});
URL = "${ctx}/zhspjkvideomanage/getzhspjklist.do";
var zNodes="";
var setting = {
view: {
selectedMulti: false,
dblClickExpand:false
},
async: {
enable: true,
type : "get",
url:URL,
autoParam: ["id"]
},
callback : {
onClick: zTreeOnClick,
onRightClick: zTreeOnRightClick,
onAsyncSuccess: onAsyncSuccess
}
};
function initMyZtree(){
var id = "${id}";
// alert(id);
URL = "${ctx}/zhspjkvideomanage/getzhspjklist.do?id="+id;
$.ajax({
type: "POST",
dataType: "json",
url: URL,
success: function(data) {
zNodes=data;
$.fn.zTree.init($("#ztree"), setting, zNodes);
}
});
}
/******Ztree End ******/
//默认9个窗口播放
var playMany = false;
function zTreeOnClick(event, treeId, treeNode) {
$(".curSelectedNode").removeClass("curSelectedNode"); //该行去掉了节点被选中后的背景色
//var hasChildren = treeNode.hasChildren;
var rtmpurl = treeNode.id;
if (rtmpurl != null) {//判断不是数字
if(rtmpurl.indexOf("rtmp")!=-1){
if (rtmpurl && rtmpurl[0]) {
var videoName = treeNode.name;
videoNodePlay(rtmpurl, videoName);
} else {
notify("该视频暂无法进行播放", "warning");
}
}else{
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandNode(treeNode);
}
   } else {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandNode(treeNode);
}
}
function zTreeOnDblClick(event, treeId, treeNode) {
}
/*播放多个视频(双击选择非底部子节点)*/
function playManyVideo(event, treeId, treeNode) {
var selectValue = treeNode.id;
var url = "/tapi/video/videoPlayList?sort=b.object_level,desc";
if (selectValue != null) url = url + "&id=" + treeNode.id + "&type=" + treeNode.type + "&size=" + totalNum + "&areaId=130000000000&t=" + Math.random();
$http.get(url, {}, function (data) {
if (data) {
var playList = "";
for (var index = 0; index < totalNum; index++) {
if (index >= data.content.length) {
break;
}
playList += getVideoPath(data.content[index], index);
}
if (playList) {
CCTVActiveX.playbylist(playList, false);
}
}
});
}
function zTreeOnRightClick(event, treeId, treeNode) {
// alert("right" + treeNode);
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
if (!treeNode) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var rootNode = treeObj.getNodes()[0];
treeObj.expandNode(rootNode, true, false, false);
}
}
function setRowCol(row, col) {
totalNum = row * col;
I_stylePlayer({row: row, column: col});
}
//视频播放
function play(rtmpAddress, iWndIndex) {
if (!iWndIndex) {
iWndIndex = getSelectIndex();
iWndIndex = iWndIndex == -1 ? 0 : iWndIndex;
}
I_StartRealPlay(rtmpAddress, {iWndIndex: iWndIndex});
}
//视频节点点击播放
function videoNodePlay(rtmpAddress, videoName, iWndIndex) {
if (!iWndIndex) {
iWndIndex = getSelectIndex();
iWndIndex = iWndIndex == -1 ? 0 : iWndIndex;
}
var parentId = getVideoPaneId(iWndIndex);
$("#" + parentId).find("div.video-win-title").html(videoName);
I_StartRealPlay(rtmpAddress, {iWndIndex: iWndIndex});
}
function smartPlayerStop(iWndIndex) {
var parentId = getVideoPaneId(iWndIndex);
// $("#" + parentId).find("div.video-win-title").html("");
$("#" + parentId).find(".video-win-content").html("");
}
function smartPlayerStopAll() {
// $(".video-win-title").html("");
$(". video-win-content").html("");
}
</script>
<!-- 鼠标右键 开始-->
<script type="text/javascript">
// document.oncontextmenu=function(ev){
// ev=ev||event;
// var x = ev.clientX;
// var y = ev.clientY;
// var menu = document.querySelector("#smartMenu_player-box-0");
// menu.style.display="block";
// menu.style.left = x+"px";
// menu.style.top = y+"px";
// ev.preventDefault();
// };
// document.onclick=function(){
// var menu = document.querySelector("#smartMenu_player-box-0");
// menu.style.display="none";
// }
(function () {
var div = document.querySelector("#video-content");
var menu = document.querySelector("#smartMenu_player-box-0");
// var p=document.querySelector("#p");
div.addEventListener("contextmenu", function (event) {
event.preventDefault();
menu.style.display = "block";
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
// p.addEventListener("click",function () {
// alert("a");
// });
});
var o = document.getElementById("video-content");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度
document.addEventListener("contextmenu", function (event) {
if (event.pageX > h || event.pageY > w) {
menu.style.display = "none";
}
});
})();
</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%;
}
/* 鼠标右键样式--开始 */
.smart_menu_box{ position: absolute; width:130px; background:#fff; border-radius: 5px; display: none; border:1px solid #dfdfdf;}
.smart_menu_ul li{ position:relative;}
.smart_menu_ul li a{ display:block; margin:2px; border-top:1px solid #dfdfdf; color:#777;}
.smart_menu_ul li a p{ padding:5px;}
.smart_menu_ul li:hover p{ background:#f2f2f2; color:#111;}
.smart_menu_ul li:hover .ejcd{ display:block;}
.smart_menu_ul .smart_menu_box{ display:none; position:absolute; right:-100px; width:100px; top:0; background:#fff; padding:2px;border:1px solid #dfdfdf;}
.smart_menu_ul .smart_menu_box a{ margin:2px; padding:5px;}
.smart_menu_ul .smart_menu_box a:hover { background:#f2f2f2; color:#111;}
.smart_menu_box li:first-child a,
.smart_menu_ul .smart_menu_box a:first-child{ border:0;}
.smart_menu_ul li a {
background-repeat: no-repeat;
padding: 5px 0px;
padding-left: 22px;
background-size: 18px;
background-position-y: 6px;
}
/* 鼠标右键样式--结束 */
</style>
<script type="text/javascript" src="https://bigd.mimk.cn/bigdata/resource/js/classie.js"></script>
<%--左侧菜单设置--%>
<script>
var
menuRight = document.getElementById('cbp-spmenu-s2'),
showRight = document.getElementById('showleft'),
body = document.body;
showRight.onclick = function () {
classie.toggle(this, 'active');
classie.toggle(menuRight, 'cbp-spmenu-open');
disableOther('showleft');
};
function disableOther(button) {
if (button !== 'showleft') {
classie.toggle(showRight, 'disabled');
}
}
$(function () {
$(".but").click(function () {
$(this).toggleClass("jtzh");
});
});
// getusermenu();
//获得当前登录人菜单
function getusermenu(){
var monitorHost = '${monitorHost}';
$.ajax({
type: 'POST',
url: _CTX + '/sysmenuitemdictionary/getusermenu.do',
dataType: 'json',
success: function (json) {
var cjcd = json.cjcd; //产监菜单
var zhzscd = json.zhzscd; //综合展示菜单
var cjcdhtml = ""; //产监菜单html
if(cjcd.length > 0){
for(var i = 0;i<cjcd.length-2;i++){
cjcdhtml += "<a href=\""+monitorHost+cjcd[i].menuurl+"\" target=\"_self\">\n" +
" <span class=\"icon "+cjcd[i].zhzsmenuicon+"\"></span>\n" +
" <p>"+(cjcd[i].dicname).replace(new RegExp("<br>","g"),"")+"</p>\n" +
" </a>";
}
}
var zhzscdhtml = ""; //综合展示菜单html
var leftTitle = "${leftTitle}";
if(zhzscd.length > 0 ){
for(var i = 0;i<zhzscd.length;i++){
if(leftTitle == zhzscd[i].dicname){ //选中效果
zhzscdhtml += "<a class=\"on\" href=\""+_CTX+zhzscd[i].menuurl+"\">" +
"<i class=\"nav_icon_z "+zhzscd[i].zhzsmenuicon+"\"></i>" +
zhzscd[i].dicname +
"</a>";
}else{ //不选中
zhzscdhtml += "<a class=\"\" href=\""+_CTX+zhzscd[i].menuurl+"\">" +
"<i class=\"nav_icon_z "+zhzscd[i].zhzsmenuicon+"\"></i>" +
zhzscd[i].dicname+
"</a>";
}
}
}
//顶部菜单展示
cjcdhtml = "<a href=\"${monitorHost}\" target=\"_self\" >\n" +
" <span class=\"icon icon-zhzs\"></span>\n" +
" <p>首页</p>\n" +
" </a>"
+cjcdhtml;
$("#lycyjccd").html(cjcdhtml);
//左侧菜单展示
zhzscdhtml = "<div class=\"but\" id=\"showleft\"></div><h3>综合展示</h3>"+zhzscdhtml;
$("#cbp-spmenu-s2").html(zhzscdhtml);
daohang (); //顶部导航渲染
zcdaohang(); // 左侧导航渲染
}
})
}
daohang (); //顶部导航渲染
zcdaohang(); // 左侧导航渲染
// getuserlogo();
//获得用户显示logo
function getuserlogo(){
$.ajax({
type: 'POST',
url: _CTX + '/sysuserlogo/getuserlogo.do',
dataType: 'json',
success: function (json) {
var ret = json.data;
if(ret!= null && ret != "" && ret != undefined && ret != "undefined"){
var logohtml = "<a href=\"#\" class=\"navbar-brand\">" +
"<img style=\"height:55px;\" src=\"${ctx}"+ret+"\">"+
"</a>";
$("#userlogo").html(logohtml);
}
}
})
}
/**
* 顶部导航导航
*/
function daohang() {
$(".navfloat-l").hover(function (e) {
$(".header-l").stop().animate({'top': '0'}, 100);
}, function () {
});
$(".header-l").hover(function (e) {
}, function () {
$(".header-l").stop().animate({'top': '-90px'}, 100);
});
}
/**
* 左侧导航
*/
function zcdaohang() {
var
menuRight = document.getElementById('cbp-spmenu-s2'),
showRight = document.getElementById('showleft'),
body = document.body;
showRight.onclick = function () {
classie.toggle(this, 'active');
classie.toggle(menuRight, 'cbp-spmenu-open');
disableOther('showleft');
};
$(".but").click(function () {
$(this).toggleClass("jtzh");
});
}
var
menuRight = document.getElementById('cbp-spmenu-s2'),
showRight = document.getElementById('showleft'),
body = document.body;
showRight.onclick = function () {
classie.toggle(this, 'active');
classie.toggle(menuRight, 'cbp-spmenu-open');
disableOther('showleft');
};
function disableOther(button) {
if (button !== 'showleft') {
classie.toggle(showRight, 'disabled');
}
}
$(function () {
$(".but").click(function () {
$(this).toggleClass("jtzh");
});
});
//$(showRight).click()
</script>
<%-- 头部 和 侧边菜单结束. --%>
</body>
</html>