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
|
||
}
|