240 lines
8.3 KiB
JavaScript
240 lines
8.3 KiB
JavaScript
|
import { playHikUrl } from "../../../public/js/url.js";
|
|||
|
|
var deviceVideoWindow = [];//保存正在播放的视频窗口
|
|||
|
|
function showRightPage() {
|
|||
|
|
setInitPage();
|
|||
|
|
}
|
|||
|
|
function setInitPage() {
|
|||
|
|
var div = setVideoDivHtml(4);
|
|||
|
|
$(".videoShowInfo").html(div);
|
|||
|
|
videoPlayEvent();
|
|||
|
|
var that = document.getElementsByClassName("fourScreen")[0]
|
|||
|
|
setVideoFourDivSize(that);
|
|||
|
|
}
|
|||
|
|
function setVideoDivHtml(number) {
|
|||
|
|
var div = "";
|
|||
|
|
if (deviceVideoWindow.length != 0) {
|
|||
|
|
if (deviceVideoWindow.length <= number) {
|
|||
|
|
for (var i = 0; i < deviceVideoWindow.length; i++) {
|
|||
|
|
let cameraIndexCode = deviceVideoWindow[i]["deviceid"];
|
|||
|
|
let cameraName = deviceVideoWindow[i]["cameraName"];
|
|||
|
|
var url=`${playHikUrl}?cameraIndexCode=${cameraIndexCode}`
|
|||
|
|
div += `<div id="videoMonitorDevice${cameraIndexCode}" deviceid="${cameraIndexCode}">
|
|||
|
|
<p class="videoShowName">${cameraName}</p>
|
|||
|
|
<div class="videoShowImg">
|
|||
|
|
<iframe src=${url} width='100%' height='100%'></iframe>
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
var count = number - deviceVideoWindow.length;
|
|||
|
|
div += noDataDiv(count);
|
|||
|
|
} else {
|
|||
|
|
div += noDataDiv(number);
|
|||
|
|
var count = deviceVideoWindow.length;
|
|||
|
|
for (var i = count - 1; i >= 0; i--) {
|
|||
|
|
let deviceid = deviceVideoWindow[i]["deviceid"];
|
|||
|
|
closeVideo(deviceid);
|
|||
|
|
delDeviceVideoWindow(deviceid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
div += noDataDiv(number);
|
|||
|
|
}
|
|||
|
|
return div;
|
|||
|
|
}
|
|||
|
|
function noDataDiv(number) {
|
|||
|
|
var div = "";
|
|||
|
|
for (var j = 0; j < number; j++) {
|
|||
|
|
div += `<div></div>`;
|
|||
|
|
}
|
|||
|
|
return div;
|
|||
|
|
}
|
|||
|
|
$(".videoScreen>img").on('click', function () {
|
|||
|
|
var number = $(this).attr("number");
|
|||
|
|
var div = setVideoDivHtml(parseInt(number));
|
|||
|
|
$(".videoShowInfo").html(div);
|
|||
|
|
videoPlayEvent();
|
|||
|
|
switch (number) {
|
|||
|
|
case "1":
|
|||
|
|
setVideoOneDivSize(this);
|
|||
|
|
break;
|
|||
|
|
case "2":
|
|||
|
|
setVideoTwoDivSize(this);
|
|||
|
|
break;
|
|||
|
|
case "4":
|
|||
|
|
setVideoFourDivSize(this);
|
|||
|
|
break;
|
|||
|
|
case "9":
|
|||
|
|
setVideoNiceDivSize(this);
|
|||
|
|
break;
|
|||
|
|
case "16":
|
|||
|
|
setVideoSixteenDivSize(this);
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
videoPlayEvent();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function videoPlayEvent() {
|
|||
|
|
$(".videoShowInfo>div").unbind();
|
|||
|
|
$(".videoShowInfo>div").click(function () {
|
|||
|
|
$(this).attr("class", "videoOption");
|
|||
|
|
$(this).siblings().removeClass("videoOption")
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getAloneVideoData(cameraIndexCode, cameraName) {
|
|||
|
|
//这里需要先点击播放框在播放
|
|||
|
|
var videoShowDiv = $(".videoShowInfo>div");
|
|||
|
|
var flag = 0;
|
|||
|
|
for (var i = 0; i < videoShowDiv.length; i++) {
|
|||
|
|
var thisVideo = videoShowDiv[i];
|
|||
|
|
var cls = $(thisVideo).attr("class");
|
|||
|
|
if (cls == "videoOption") {
|
|||
|
|
var optiondeviceid = $(thisVideo).attr("deviceid");
|
|||
|
|
flag = 1;
|
|||
|
|
for (var j = 0; j < deviceVideoWindow.length; j++) {
|
|||
|
|
if (cameraIndexCode == deviceVideoWindow[j]["deviceid"]) {
|
|||
|
|
flag = 2;
|
|||
|
|
layer.msg("当前视频正在播放,请先关闭");
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (flag == 0) {
|
|||
|
|
layer.msg("请选择播放窗口");
|
|||
|
|
return;
|
|||
|
|
} else if (flag == 1) {
|
|||
|
|
if (optiondeviceid != undefined) {
|
|||
|
|
if (optiondeviceid != cameraIndexCode) {
|
|||
|
|
closeVideo(optiondeviceid);//关闭上一个，打开一个新的
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
openMoveDeviceVideo(cameraIndexCode, cameraName)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openMoveDeviceVideo(cameraIndexCode, cameraName) {
|
|||
|
|
var url = `${playHikUrl}?cameraIndexCode=${cameraIndexCode}`
|
|||
|
|
playMdevVideo(cameraIndexCode, cameraName, url)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function playMdevVideo(cameraIndexCode, cameraName, url) {
|
|||
|
|
var deviceVideoObj = {
|
|||
|
|
"deviceid": cameraIndexCode,
|
|||
|
|
"cameraName": cameraName,
|
|||
|
|
"status": "open"
|
|||
|
|
}
|
|||
|
|
var iframe = `<p class="videoShowName">${cameraName}</p>
|
|||
|
|
<div class="videoShowImg">
|
|||
|
|
<iframe src=${url} width='100%' height='100%' ></iframe>
|
|||
|
|
</div>`;
|
|||
|
|
$(".videoShowInfo>.videoOption").html(`${iframe}`);
|
|||
|
|
$(".videoShowInfo>.videoOption").attr("id", `videoMonitorDevice${cameraIndexCode}`).attr("deviceid", `${cameraIndexCode}`);
|
|||
|
|
deviceVideoWindow.push(deviceVideoObj);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setVideoOneDivSize(that) {
|
|||
|
|
$(that).attr("src", "./image/oneSelect.png");
|
|||
|
|
$(".twoScreen").attr("src", "./image/twoNoSelect.png");
|
|||
|
|
$(".fourScreen").attr("src", "./image/fourNoSelect.png");
|
|||
|
|
$(".niceScreen").attr("src", "./image/niceNoSelect.png");
|
|||
|
|
$(".sixteenScreen").attr("src", "./image/sixteenNoSelect.png");
|
|||
|
|
$(".videoShowInfo>div").css("width", "100%").css("height", "100%");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setVideoTwoDivSize(that) {
|
|||
|
|
$(that).attr("src", "./image/twoSelect.png");
|
|||
|
|
$(".oneScreen").attr("src", "./image/oneNoSelect.png");
|
|||
|
|
$(".fourScreen").attr("src", "./image/fourNoSelect.png");
|
|||
|
|
$(".niceScreen").attr("src", "./image/niceNoSelect.png");
|
|||
|
|
$(".sixteenScreen").attr("src", "./image/sixteenNoSelect.png");
|
|||
|
|
$(".videoShowInfo>div").css("width", "50%").css("height", "100%");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setVideoFourDivSize(that) {
|
|||
|
|
$(that).attr("src", "./image/fourSelect.png");
|
|||
|
|
$(".oneScreen").attr("src", "./image/oneNoSelect.png");
|
|||
|
|
$(".twoScreen").attr("src", "./image/twoNoSelect.png");
|
|||
|
|
$(".niceScreen").attr("src", "./image/niceNoSelect.png");
|
|||
|
|
$(".sixteenScreen").attr("src", "./image/sixteenNoSelect.png");
|
|||
|
|
$(".videoShowInfo>div").css("width", "50%").css("height", "50%");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setVideoNiceDivSize(that) {
|
|||
|
|
$(that).attr("src", "./image/niceSelect.png");
|
|||
|
|
$(".oneScreen").attr("src", "./image/oneNoSelect.png");
|
|||
|
|
$(".twoScreen").attr("src", "./image/twoNoSelect.png");
|
|||
|
|
$(".fourScreen").attr("src", "./image/fourNoSelect.png");
|
|||
|
|
$(".sixteenScreen").attr("src", "./image/sixteenNoSelect.png");
|
|||
|
|
$(".videoShowInfo>div").css("width", "33.33%").css("height", "33.33%");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setVideoSixteenDivSize(that) {
|
|||
|
|
$(that).attr("src", "./image/sixteenSelect.png");
|
|||
|
|
$(".oneScreen").attr("src", "./image/oneNoSelect.png");
|
|||
|
|
$(".twoScreen").attr("src", "./image/twoNoSelect.png");
|
|||
|
|
$(".fourScreen").attr("src", "./image/fourNoSelect.png");
|
|||
|
|
$(".niceScreen").attr("src", "./image/niceNoSelect.png");
|
|||
|
|
$(".videoShowInfo>div").css("width", "25%").css("height", "25%");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function delDeviceVideoWindow(deviceid) {
|
|||
|
|
for (var j = 0; j < deviceVideoWindow.length; j++) {
|
|||
|
|
if (deviceid == deviceVideoWindow[j]["deviceid"]) {
|
|||
|
|
deviceVideoWindow.splice(j, 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeVideo(deviceid) {
|
|||
|
|
delDeviceVideoWindow(deviceid);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//这里我需要监听一下视频的数据是否正常，正常以后，我在去resize
|
|||
|
|
window.addEventListener('message', function (e) {
|
|||
|
|
var data = e.data;
|
|||
|
|
var cmd = data["cmd"];
|
|||
|
|
var deviceid = data["deviceid"];
|
|||
|
|
if (cmd == "videoloadedSuccess") {
|
|||
|
|
var width = parseFloat($(`.videoShowInfo>#videoMonitorDevice${deviceid}>.videoShowImg`).css("width"));
|
|||
|
|
var height = parseFloat($(`.videoShowInfo>#videoMonitorDevice${deviceid}>.videoShowImg`).css("height"));
|
|||
|
|
//为了让视频自适应
|
|||
|
|
$(`.videoShowInfo>#videoMonitorDevice${deviceid}>.videoShowImg`).css("width", width + 1 + "px").css("height", height + 1 + "px")
|
|||
|
|
$(`.videoShowInfo>#videoMonitorDevice${deviceid}>.videoShowImg`).css("width", width - 1 + "px").css("height", height - 1 + "px")
|
|||
|
|
}
|
|||
|
|
if (cmd == "closePage") {
|
|||
|
|
$(`.videoShowInfo>#videoMonitorDevice${deviceid}>iframe`).remove();
|
|||
|
|
$(`.videoShowInfo>#videoMonitorDevice${deviceid}`).html("");
|
|||
|
|
$(`.videoShowInfo>#videoMonitorDevice${deviceid}`).removeAttr("deviceid");
|
|||
|
|
delDeviceVideoWindow(deviceid);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//页面销毁的时候，需要调用的关闭的
|
|||
|
|
function videoClosePage() {
|
|||
|
|
var count = deviceVideoWindow.length;
|
|||
|
|
for (var i = count - 1; i >= 0; i--) {
|
|||
|
|
let deviceid = deviceVideoWindow[i]["deviceid"];
|
|||
|
|
closeVideo(deviceid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(window).bind('beforeunload', function () {
|
|||
|
|
videoClosePage();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
export {
|
|||
|
|
showRightPage,
|
|||
|
|
getAloneVideoData
|
|||
|
|
}
|