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.
515 lines
14 KiB
515 lines
14 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] == '' || 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) { |
|
$("#buttons").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: #0c234c; 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 id="buttons" style="height: 50px"> |
|
<div id="buttonspace" class="div-inline"></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>
|
|
|