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.
524 lines
15 KiB
524 lines
15 KiB
<!DOCTYPE html> |
|
|
|
<head> |
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11" /> |
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
|
<script src="jquery-1.10.2.min.js"></script> |
|
<title>video</title> |
|
<style> |
|
html, |
|
body, |
|
#map { |
|
padding: 0; |
|
margin: 0; |
|
height: 100%; |
|
overflow-x: hidden; |
|
overflow-y: hidden; |
|
} |
|
|
|
.s_btn { |
|
color: white; |
|
font-family: Microsoft YaHei; |
|
font-size: 18px |
|
border: 1px solid #1e7db9; |
|
background-color:#497897; |
|
box-shadow: 0 1px 2px #8fcaee inset, 0 -1px 0 #497897 inset, 0 -2px 3px #8fcaee inset; |
|
background: -webkit-linear-gradient(top, #42a4e0, #2e88c0); |
|
background: -moz-linear-gradient(top, #42a4e0, #2e88c0); |
|
background: linear-gradient(top, #42a4e0, #2e88c0); |
|
} |
|
|
|
#switchspace{ |
|
font-family: Microsoft YaHei; |
|
font-size: 18px; |
|
color: white; |
|
display:flex; |
|
justify-content:space-around; |
|
} |
|
/* |
|
.switch-container{ |
|
height: 25px; |
|
width: 48px; |
|
display: inline-block; |
|
overflow: hidden |
|
} |
|
.switch-container input{ |
|
display: none |
|
} |
|
.switch-container label{ |
|
display: block; |
|
width: 100%; |
|
height: 100%; |
|
background-color:rgba(0,0,0,.25); |
|
cursor: pointer; |
|
border-radius: 25px; |
|
transition: all .4s ease; |
|
} |
|
.switch-container label:before{ |
|
content:''; |
|
display: block; |
|
border-radius: 25px; |
|
height: 21px; |
|
width: 21px; |
|
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08); |
|
transition: all .4s ease; |
|
background-color: #fff; |
|
position: relative; |
|
right: -2px; |
|
top: 2px; |
|
} |
|
|
|
.switch-container input:checked~label:before{ |
|
right: -25px; |
|
background-color: #FCC118; |
|
} |
|
|
|
.switch-container input:checked~label{ |
|
background-color: #1890ff; |
|
} */ |
|
|
|
.testswitch { |
|
position: relative; |
|
float: left; |
|
width: 60px; |
|
margin: 0; |
|
-webkit-user-select:none; |
|
-moz-user-select:none; |
|
-ms-user-select: none; |
|
left: 40px; |
|
} |
|
|
|
.testswitch-checkbox { |
|
display: none; |
|
} |
|
|
|
.testswitch-label { |
|
display: block; |
|
overflow: hidden; |
|
cursor: pointer; |
|
border: 2px solid #999999; |
|
border-radius: 20px; |
|
} |
|
|
|
.testswitch-inner { |
|
display: block; |
|
width: 200%; |
|
margin-left: -100%; |
|
transition: margin 0.3s ease-in 0s; |
|
} |
|
|
|
.testswitch-inner::before, .testswitch-inner::after { |
|
display: block; |
|
float: right; |
|
width: 50%; |
|
height: 22px; |
|
padding: 0; |
|
line-height: 22px; |
|
font-size: 14px; |
|
color: white; |
|
font-family: |
|
Trebuchet, Arial, sans-serif; |
|
font-weight: bold; |
|
box-sizing: border-box; |
|
} |
|
|
|
.testswitch-inner::after { |
|
content: attr(data-on); |
|
padding-left: 10px; |
|
background-color: #00e500; |
|
color: #FFFFFF; |
|
} |
|
|
|
.testswitch-inner::before { |
|
content: attr(data-off); |
|
padding-right: 12px; |
|
background-color: #EEEEEE; |
|
color: #999999; |
|
text-align: right; |
|
} |
|
|
|
.testswitch-switch { |
|
position: absolute; |
|
display: block; |
|
width: 22px; |
|
height: 22px; |
|
/*margin: 4px;*/ |
|
background: #FFFFFF; |
|
top: 0; |
|
bottom: 0; |
|
right: 32px; |
|
border: 2px solid #999999; |
|
border-radius: 20px; |
|
transition: all 0.3s ease-in 0s; |
|
} |
|
|
|
.testswitch-checkbox:checked + .testswitch-label .testswitch-inner { |
|
margin-left: 0; |
|
} |
|
|
|
.testswitch-checkbox:checked + .testswitch-label .testswitch-switch { |
|
right: 0px; |
|
} |
|
|
|
.div-inline{ |
|
display: inline; |
|
} |
|
|
|
</style> |
|
<script> |
|
var _haslogin = false,VideoNextTimer = null; |
|
var videoUrl = "", |
|
thirdsyscode = "", |
|
presetid = "", |
|
thirdsyscodeArr = [], |
|
presetarr = [], |
|
pagesum, //共多少页 |
|
curpage = 1, //当前页 |
|
playthirdsyscodeArr = []; |
|
|
|
function GetUrlParam(paraName) { |
|
var url = window.document.location.href.toString(); |
|
var arrObj = url.split("?"); |
|
|
|
if (arrObj.length > 1) { |
|
var arrPara = arrObj[1].split("&"); |
|
var arr; |
|
|
|
for (var i = 0; i < arrPara.length; i++) { |
|
arr = arrPara[i].split("="); |
|
|
|
if (arr != null && arr[0] == paraName) { |
|
return arr[1]; |
|
} |
|
} |
|
return ""; |
|
} else { |
|
return ""; |
|
} |
|
} |
|
|
|
/** |
|
* 播放视频 |
|
* @method playVideoHrv |
|
* ***************** |
|
* @DateTime 2018-12-27 |
|
* @return {[type]} [description] |
|
*/ |
|
function playVideoHrv() { |
|
thirdsyscodeArr = thirdsyscode.split(","); |
|
|
|
var templength = thirdsyscodeArr.length; |
|
|
|
if (templength==1){ |
|
getPreset(thirdsyscode); |
|
commonVideoActive.PlayEx(thirdsyscode, "1"); |
|
|
|
|
|
}else if (templength > 1){ //如果视频个数大于1个 |
|
commonVideoActive.SetLayout(2); //设置4分屏 |
|
|
|
var startindex = (curpage -1)*4; //开始索引 = 当前页数 (1-1)*4; |
|
var endindex = startindex+4; //结束索引 = 开始索引+4; |
|
if(startindex + 4 >templength){ //如果开始索引+4 > 视频个数 |
|
endindex = templength; //结束索引 = 视频个数 |
|
} |
|
|
|
playthirdsyscodeArr = []; //当前4屏播放的数组，用于点击获取预置位使用 |
|
for(var i = startindex;i<startindex + 4;i++){ |
|
if(i >= endindex){//关屏 |
|
// console.log(i+"::::::关屏"); |
|
commonVideoActive.SetFocus(i-startindex+1); |
|
commonVideoActive.Stop(); |
|
}else{ |
|
playthirdsyscodeArr.push(thirdsyscodeArr[i]); //第三方 |
|
// console.log(i+"::::::第三方："+thirdsyscodeArr[i]); |
|
commonVideoActive.SetFocus(i-startindex+1); |
|
commonVideoActive.Stop();//先停止，后播放 |
|
commonVideoActive.PlayEx(thirdsyscodeArr[i], "1"); |
|
if(presetarr[i]==null||presetarr[i]==undefined||typeof presetarr[i] == "undefined"){ |
|
commonVideoActive.PTZGotoPreset("1"); |
|
}else{ |
|
//alert(presetarr[i]); |
|
commonVideoActive.PTZGotoPreset(presetarr[i]); |
|
} |
|
|
|
} |
|
} |
|
|
|
commonVideoActive.SetFocus(1); //设置焦点 |
|
} |
|
} |
|
|
|
/** |
|
* 根据第三方获取预置位信息 |
|
* @method getPreset |
|
* ***************** |
|
* @DateTime 2018-12-27 |
|
* @param {[type]} thirdsyscode [description] |
|
* @return {[type]} [description] |
|
*/ |
|
function getPreset(thirdsyscode) { |
|
if(typeof thirdsyscode == "undefined"||thirdsyscode == null){ |
|
// console.log(thirdsyscode+"不进行查询预置位"); |
|
return; |
|
} |
|
$.ajax({ |
|
url: "/HiatmpPro/hrv/common/getAllVideoPreset", |
|
type: "get", |
|
dataType: "json", |
|
data: { thirdsyscode: thirdsyscode }, |
|
success: function(data) { |
|
$("#buttonspace").children().remove(); |
|
var presetbtn = data.videoList; |
|
if(presetbtn == null || typeof presetbtn == "undefined"){ |
|
presetbtn = []; |
|
} |
|
|
|
for (var i = 0; i < presetbtn.length; i++) { |
|
$("#buttonspace").append("<input type='button' name='commbtn' id='" + presetbtn[i].presetid + "' " + |
|
"value='" + presetbtn[i].presetname + "' class='s_btn' ></input>"); |
|
} |
|
|
|
//预置位调用 |
|
$(".s_btn").click(function() { |
|
if (typeof(this.id) != 'undefined' && this.id != '' && this.id != 'morepreset') { |
|
var presetnum = this.id; |
|
if (this.id == "resetpreset" || this.id == "allviewpreset") { |
|
presetnum = "1"; |
|
} |
|
commonVideoActive.PTZGotoPreset(presetnum); |
|
} |
|
}); |
|
} |
|
}); |
|
} |
|
|
|
|
|
|
|
/** |
|
* 每15秒执行的函数：页面+1，清除之前定时器，设置新定时器 |
|
* @method opa |
|
* ***************** |
|
* @DateTime 2018-12-27 |
|
* @return {[type]} [description] |
|
*/ |
|
function opa() { |
|
// console.log("我会每隔15s出现一次哦！"); |
|
addone(); |
|
clearTimeout(VideoNextTimer); //清除上一次的定时器，否则会无限开多个 |
|
VideoNextTimer = null; |
|
VideoNextTimer = setTimeout(opa, 15000);//方法中调用定时器实现循环 |
|
} |
|
|
|
|
|
/** |
|
* 页面+1函数 |
|
* @method addone |
|
* ***************** |
|
* @DateTime 2018-12-27 |
|
* @return {[type]} [description] |
|
*/ |
|
function addone(){ |
|
if(curpage<pagesum){ |
|
curpage ++; |
|
$("#page").html(curpage); |
|
playVideoHrv(); |
|
}else{ |
|
curpage = 1; |
|
$("#page").html(curpage); |
|
playVideoHrv(); |
|
} |
|
} |
|
|
|
|
|
/** |
|
* 页面-1函数 |
|
* @method minusone |
|
* ***************** |
|
* @DateTime 2018-12-27 |
|
* @return {[type]} [description] |
|
*/ |
|
function minusone(){ |
|
if(curpage>1){ |
|
curpage --; |
|
$("#page").html(curpage); |
|
playVideoHrv(); |
|
}else{ |
|
curpage = pagesum; |
|
$("#page").html(curpage); |
|
playVideoHrv(); |
|
} |
|
} |
|
|
|
|
|
/** |
|
* 轮播开关 |
|
* @method luxunCheck |
|
* ***************** |
|
* @DateTime 2018-12-27 |
|
* @param {[type]} e [description] |
|
* @return {[type]} [description] |
|
*/ |
|
function luxunCheck(e){ |
|
if(e.checked){ |
|
VideoNextTimer = setTimeout(opa, 15000); |
|
}else{ |
|
clearTimeout(VideoNextTimer); //清除上一次的定时器，否则会无限开多个 |
|
VideoNextTimer = null; |
|
} |
|
} |
|
|
|
|
|
|
|
/** |
|
* 初始化参数 初始化页面时调用此函数 |
|
* @method initVideoParam |
|
* ***************** |
|
* @DateTime 2018-12-27 |
|
* @return {[type]} [description] |
|
*/ |
|
function initVideoParam() { |
|
|
|
try { |
|
const myreadreg = new ActiveXObject('WScript.shell'); |
|
const CurrentVersion = myreadreg.RegRead('HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Uninstall\\海信网络视频监控-通用视频控件\\DisplayVersion'); |
|
console.log(CurrentVersion); |
|
} catch (e) { |
|
alert('请用安装视频控件'); |
|
return; |
|
} |
|
|
|
|
|
videoUrl = GetUrlParam("videoService"); //视频服务地址 |
|
thirdsyscode = GetUrlParam("thirdsyscode"); //第三方编号 |
|
presetid = GetUrlParam("presetid"); //预置位 |
|
|
|
// console.log('chromevideopresetid:' ,presetid); |
|
thirdsyscodeArr = thirdsyscode.split(","); |
|
|
|
var templength = thirdsyscodeArr.length; |
|
if(presetid == ""){ |
|
for(var prei = 0 ,precount = templength; prei<precount ;prei++){ |
|
presetarr.push("1"); |
|
} |
|
}else{ |
|
presetarr = presetid.split(","); |
|
} |
|
|
|
if(templength ==1){ |
|
$("#switchspace").css('display','none'); |
|
} |
|
|
|
pagesum = Math.ceil(templength/4); |
|
curpage = 1; |
|
$("#videosum").html("共"+templength+"路"); |
|
$("#pagesum").html("共"+pagesum+"页"); |
|
$("#page").html("1"); |
|
|
|
setTimeout(function() { |
|
if (_haslogin) { //如果已登录，直接播放 |
|
commonVideoActive.PlayEx(thirdsyscode, "1"); |
|
} else { |
|
commonVideoActive.GetInstanceEx(videoUrl); |
|
} |
|
}, 30); |
|
|
|
|
|
// 轮播定时器 |
|
if(pagesum > 1){ |
|
$("#lunbospace").css('display',''); |
|
//VideoNextTimer = setTimeout(opa, 15000); |
|
} |
|
|
|
|
|
} |
|
|
|
</script> |
|
</head> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnGetInstance()"> |
|
if (window.console) { |
|
console.log('2.0登录成功'); |
|
} |
|
_haslogin = true; |
|
playVideoHrv(); |
|
</script> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnGetInstanceEx()"> |
|
if (window.console) { |
|
console.log('2.1登录成功'); |
|
} |
|
_haslogin = true; |
|
playVideoHrv(); |
|
</script> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnGetInstanceFailed(reason)"> |
|
if (window.console) { |
|
console.log('2.0登录失败'); |
|
} |
|
</script> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnGetInstanceFailedEx(reason)"> |
|
if (window.console) { |
|
console.log('2.1登录失败'); |
|
} |
|
playVideoHrv(); |
|
</script> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnPlay(index, cameraId)"> |
|
</script> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnPlayError(index, cameraId)"> |
|
//alert('播放失败'); |
|
</script> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnPTZEvent()"> |
|
</script> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnPTZEventFailed()"> |
|
</script> |
|
<script language="javascript" FOR="commonVideoActive" EVENT="OnFocusChanged(IWndIndex)"> |
|
// console.log("获取"+IWndIndex+"第三方编号："+playthirdsyscodeArr[IWndIndex-1]+"的预置位"); |
|
getPreset(playthirdsyscodeArr[IWndIndex-1]); |
|
</script> |
|
|
|
<body scroll="no" onload="this.initVideoParam()"> |
|
<div style='height:100%;width:100%; background-color: #43A9DA; display: flex;flex-direction: column'> |
|
<div style='flex:1'> |
|
<object id="commonVideoActive" classid="clsid:A8B6BBF3-DA78-4BCB-ABAB-FB0410A463E4" width="100%" height="100%"></object> |
|
</div> |
|
<div style="height: 140px"> |
|
<!-- <div class="switch-container" style="position:absolute;left: 40px"> |
|
<input type="checkbox" id="user-switch" checked="false" onclick='luxunCheck(this)'> |
|
<label for="user-switch"> |
|
<span class="testswitch-inner" data-on="ON" data-off="OFF"></span> |
|
</label> |
|
</div> --> |
|
<div id="buttonspace" class="div-inline"></div> |
|
|
|
|
|
<!-- 轮播DIV，无此需求，隐藏 --> |
|
<!-- <div id = 'lunbospace' class="div-inline" style="position:relative;float: right;right: 60px ;display: none;"> |
|
<div style="position:absolute;color:#ffffff;font-size: 16px ;margin: 2px"> |
|
<span>轮播</span> |
|
</div> |
|
<div class="testswitch"> |
|
<input class="testswitch-checkbox" id="onoffswitch" type="checkbox" onclick='luxunCheck(this)'> |
|
<label class="testswitch-label" for="onoffswitch"> |
|
<span class="testswitch-inner" data-on="开" data-off="关"></span> |
|
<span class="testswitch-switch"></span> |
|
</label> |
|
</div> |
|
</div>--> |
|
|
|
|
|
<div id="switchspace"> |
|
<div> |
|
<span id = 'videosum'></span> |
|
</div> |
|
<div> |
|
<input type="button" value="<" onclick="minusone()" style="background-color:#497897;color:white"></input> |
|
<span id = ></span>第<span id = 'page'></span><span id =>页</span> |
|
<input type="button" value=">" onclick="addone()" style="background-color:#497897;color:white"></input> |
|
</div> |
|
<div> |
|
<span id = 'pagesum'></span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
</html>
|
|
|