979 lines
34 KiB
JavaScript
979 lines
34 KiB
JavaScript
|
// var dataUrl ="http://192.168.0.110:18888/rearScreen/"
|
|||
|
|
// var dataUrl ="http://192.168.195.243:18888/rearScreen/"
|
|||
|
|
var videoUrl = "http://192.168.0.110:18885/witDisplay/"
|
|||
|
|
var clickCount = 0;
|
|||
|
|
|
|||
|
|
var token2 = localStorage.getItem('video_token');
|
|||
|
|
var token1 = localStorage.getItem('video_token1');
|
|||
|
|
//当前展示树 1移动球机，2固定 球机
|
|||
|
|
var openBallsNum = localStorage.getItem('openBallsNum');
|
|||
|
|
var video_puid_1 = localStorage.getItem("video_puid")
|
|||
|
|
//定义树节点初始数据
|
|||
|
|
var zNodes1 = [];
|
|||
|
|
//播放球机集合
|
|||
|
|
let playBallList = [];
|
|||
|
|
//窗口集合
|
|||
|
|
let videoList = [];
|
|||
|
|
//默认选择视频框
|
|||
|
|
var selectedScreen = "video1";
|
|||
|
|
//当前是几窗口模式
|
|||
|
|
var numOfWindows = 1;
|
|||
|
|
//全屏or窗口
|
|||
|
|
let status = 1;
|
|||
|
|
//平台在线的球机
|
|||
|
|
var onLineBallList = [];
|
|||
|
|
var imgType = 1;
|
|||
|
|
var video_puid = '34020000001180000003';
|
|||
|
|
|
|||
|
|
var videoLoaded = true; // 在进入系统时初始化一个变量来记录视频是否加载完成，默认为true
|
|||
|
|
$(function () {
|
|||
|
|
//接口状态数量
|
|||
|
|
// interfaceStatus();
|
|||
|
|
let html = "";
|
|||
|
|
//加载球机树
|
|||
|
|
getRoleTreeData(1,"")
|
|||
|
|
// setTimeout('getRoleTreeData(1)',3500)
|
|||
|
|
for (let i = 1; i <= 9; i++) {
|
|||
|
|
videoList.push({
|
|||
|
|
selectedScreen: "video" + i,
|
|||
|
|
playState: false,
|
|||
|
|
state: 0
|
|||
|
|
})
|
|||
|
|
html += '<canvas id="canvas_video' + i + '" style="display:none;"></canvas>'
|
|||
|
|
}
|
|||
|
|
$('#canvasDiv').empty().append(html);
|
|||
|
|
//默认加载一个视频
|
|||
|
|
ballOne();
|
|||
|
|
|
|||
|
|
//用于首页视频点击进入播放视频
|
|||
|
|
setTimeout(function () {
|
|||
|
|
if (!isEmpty(video_puid_1)){
|
|||
|
|
video_puid = video_puid_1;
|
|||
|
|
}
|
|||
|
|
if (video_puid != "") {
|
|||
|
|
let url = _cf_1.q2http_url + "stream.flv?puid=" + video_puid + "&idx=0&stream=0&token=" + token1;
|
|||
|
|
//循环视频播放列表
|
|||
|
|
try {
|
|||
|
|
myPlayer = flvjs.createPlayer({
|
|||
|
|
type: 'flv',
|
|||
|
|
url: url,
|
|||
|
|
isLive: true,
|
|||
|
|
hasAudio: false
|
|||
|
|
}, {
|
|||
|
|
enableWorker: false,
|
|||
|
|
autoCleanupSourceBuffer: true, //清理缓冲区
|
|||
|
|
enableStashBuffer: false,
|
|||
|
|
stashInitialSize: 128, // 减少首桢显示等待时长
|
|||
|
|
statisticsInfoReportInterval: 600,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myPlayer.attachMediaElement(document.getElementById('video1'));
|
|||
|
|
myPlayer.load();
|
|||
|
|
setTimeout(function () {
|
|||
|
|
myPlayer.play();
|
|||
|
|
}, 200);
|
|||
|
|
} catch (e) {
|
|||
|
|
alert("该视频不在线。。。");
|
|||
|
|
}
|
|||
|
|
var selectedScreen = 'video1';
|
|||
|
|
$('#video' + selectedScreen + '_html5_api').css("width", "100%");
|
|||
|
|
$('#video' + selectedScreen + '_html5_api').css("height", "100%");
|
|||
|
|
$('#video1').css("width", "85%");
|
|||
|
|
$('#video1').css("height", "100%");
|
|||
|
|
$('#video1').css("margin-left", "7%");
|
|||
|
|
$('#video1').css("margin-top", "2%");
|
|||
|
|
$('#video' + selectedScreen + '_html5_api').css("background-color", "black");
|
|||
|
|
$('.vjs-text-track-display').hide();
|
|||
|
|
$('.vjs-loading-spinner').hide();
|
|||
|
|
$('.vjs-big-play-button').hide();
|
|||
|
|
$('.vjs-control-bar').hide();
|
|||
|
|
$('.vjs-error-display').hide();
|
|||
|
|
$('.vjs-error-display').hide();
|
|||
|
|
$('.vjs-modal-dialog').hide();
|
|||
|
|
$('.vjs-poster').removeAttr("class");
|
|||
|
|
$('.video' + selectedScreen + '-dimensions').css("width", "100%");
|
|||
|
|
$('.video' + selectedScreen + '-dimensions').css("height", "100%");
|
|||
|
|
}
|
|||
|
|
playBallList.push({
|
|||
|
|
puid: video_puid,
|
|||
|
|
selectedScreen: 'video1',
|
|||
|
|
window: 1,
|
|||
|
|
start: true,
|
|||
|
|
type: '1',
|
|||
|
|
myPlayer: myPlayer,
|
|||
|
|
token : token1,
|
|||
|
|
pathType: 2
|
|||
|
|
});
|
|||
|
|
video_puid = '';
|
|||
|
|
}, 1500);
|
|||
|
|
|
|||
|
|
|
|||
|
|
// $("#imgBtn").click(function () {
|
|||
|
|
// if (imgType === 1) {
|
|||
|
|
// imgType = 2;
|
|||
|
|
// $("#video-left").css("display", "none")
|
|||
|
|
// $("#video-center").css("width", "98%")
|
|||
|
|
// $("#imgBtn").attr("src", "right_triangle.png")
|
|||
|
|
// } else {
|
|||
|
|
// imgType = 1;
|
|||
|
|
// $("#video-center").css("width", "75%")
|
|||
|
|
// setTimeout(function () {
|
|||
|
|
// $("#video-left").css("display", "")
|
|||
|
|
// }, 2000)
|
|||
|
|
// $("#imgBtn").attr("src", "left_triangle.png")
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 使用Layui的日期时间范围选择器组件
|
|||
|
|
layui.use('laydate', function(){
|
|||
|
|
var laydate = layui.laydate;
|
|||
|
|
|
|||
|
|
// 初始化起始时间选择器
|
|||
|
|
laydate.render({
|
|||
|
|
elem: '#start-time',
|
|||
|
|
type: 'datetime',
|
|||
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|||
|
|
min: dayOffset(-11) + ' 00:00:00', // 设置最小可选日期
|
|||
|
|
max: getCurrentDateTime(), // 设置最大可选日期
|
|||
|
|
theme: 'grid',
|
|||
|
|
done: function(value, date){
|
|||
|
|
// 获取起始时间选择器的值
|
|||
|
|
var startTime = new Date(value).getTime();
|
|||
|
|
var endTime = new Date($('#end-time').val()).getTime();
|
|||
|
|
|
|||
|
|
// 如果结束时间早于起始时间，则自动修正为与起始时间相同
|
|||
|
|
if (endTime < startTime){
|
|||
|
|
$('#end-time').val(value);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 初始化结束时间选择器
|
|||
|
|
laydate.render({
|
|||
|
|
elem: '#end-time',
|
|||
|
|
type: 'datetime',
|
|||
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|||
|
|
min: dayOffset(-11) + ' 00:00:00', // 设置最小可选日期
|
|||
|
|
max: getCurrentDateTime(), // 设置最大可选日期
|
|||
|
|
theme: 'grid',
|
|||
|
|
done: function(value, date){
|
|||
|
|
// 获取结束时间选择器的值
|
|||
|
|
var startTime = new Date($('#start-time').val()).getTime();
|
|||
|
|
var endTime = new Date(value).getTime();
|
|||
|
|
|
|||
|
|
// 如果结束时间早于起始时间，则自动修正为与起始时间相同
|
|||
|
|
if (endTime < startTime){
|
|||
|
|
$('#end-time').val($('#start-time').val());
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 获取当前日期时间字符串
|
|||
|
|
function getCurrentDateTime(){
|
|||
|
|
var now = new Date();
|
|||
|
|
var year = now.getFullYear();
|
|||
|
|
var month = padZero(now.getMonth() + 1);
|
|||
|
|
var day = padZero(now.getDate());
|
|||
|
|
var hours = padZero(now.getHours());
|
|||
|
|
var minutes = padZero(now.getMinutes());
|
|||
|
|
var seconds = padZero(now.getSeconds());
|
|||
|
|
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取相对于当前日期的偏移量的日期字符串
|
|||
|
|
function dayOffset(offset){
|
|||
|
|
var now = new Date();
|
|||
|
|
now.setDate(now.getDate() + offset);
|
|||
|
|
var year = now.getFullYear();
|
|||
|
|
var month = padZero(now.getMonth() + 1);
|
|||
|
|
var day = padZero(now.getDate());
|
|||
|
|
return year + '-' + month + '-' + day + ' 00:00:00';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 数字补零函数
|
|||
|
|
function padZero(num){
|
|||
|
|
return num < 10 ? '0' + num : num;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("#imgSearch").click(function () {
|
|||
|
|
getRoleTreeData(1,$("#keyWord").val())
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 监控视频-接口状态数量
|
|||
|
|
*/
|
|||
|
|
function interfaceStatus() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
url: dataUrl + 'electricity/interfaceStatus',
|
|||
|
|
data: "type=4",
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
let interface = res.obj.electricityBean;
|
|||
|
|
// document.getElementById('requestNum').innerText = parseInt(interface.requestNum);
|
|||
|
|
// document.getElementById('successNum').innerText = parseInt(interface.successNum);
|
|||
|
|
// document.getElementById('errorNum').innerText = parseInt(interface.errorNum);
|
|||
|
|
document.getElementById('requestNum').innerText = 15;
|
|||
|
|
document.getElementById('successNum').innerText = 15;
|
|||
|
|
document.getElementById('errorNum').innerText = 0;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 球机树搜索---回车调用搜索方法
|
|||
|
|
* @param event
|
|||
|
|
*/
|
|||
|
|
function handleKeyDown(event) {
|
|||
|
|
if (event.keyCode === 13) {
|
|||
|
|
event.preventDefault(); // 阻止默认的回车行为
|
|||
|
|
// 在这里执行您想要的操作
|
|||
|
|
getRoleTreeData(1,$("#keyWord").val())
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//改变球机树 固定视频or移动视频
|
|||
|
|
function changeView(num) {
|
|||
|
|
localStorage.setItem('openBallsNum', num);
|
|||
|
|
openBalls();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//改变选择样式
|
|||
|
|
function openBalls() {
|
|||
|
|
var nowNum = localStorage.getItem('openBallsNum');
|
|||
|
|
if (nowNum == null || nowNum == "null") {
|
|||
|
|
nowNum = '1';
|
|||
|
|
}
|
|||
|
|
console.log("nowNum===" + nowNum)
|
|||
|
|
if (nowNum == 1) {
|
|||
|
|
$("#null1").css("border-bottom", "4px solid transparent");
|
|||
|
|
$("#null2").css("border-bottom", "4px solid #04A087");
|
|||
|
|
getRoleTreeData(nowNum); //移动球机
|
|||
|
|
} else if (nowNum == 2) {
|
|||
|
|
$("#null1").css("border-bottom", "4px solid #04A087");
|
|||
|
|
$("#null2").css("border-bottom", "4px solid transparent");
|
|||
|
|
getRoleTreeData(nowNum); //移动球机
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//树的设置
|
|||
|
|
var setting1 = {
|
|||
|
|
// 不显示引导线
|
|||
|
|
view: {
|
|||
|
|
selectedMulti: false,
|
|||
|
|
// showIcon:false
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
simpleData: {
|
|||
|
|
enable: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
edit: {
|
|||
|
|
enable: false,
|
|||
|
|
},
|
|||
|
|
callback: {
|
|||
|
|
onClick: onTreeClick,
|
|||
|
|
// 点击前
|
|||
|
|
beforeClick: beforeClick,
|
|||
|
|
// 不允许拖拽
|
|||
|
|
beforeDrag: beforeDrag,
|
|||
|
|
// beforeExpand: zTreeBeforeExpand //节点展开前的事件
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function beforeClick(treeId, treeNode) {
|
|||
|
|
if (treeNode.id == 0) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//不允许拖拽
|
|||
|
|
function beforeDrag(treeId, treeNodes) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取数据初始化树
|
|||
|
|
function getRoleTreeData(ballType,keyWord) {
|
|||
|
|
console.log("ballType===" + ballType);
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'post',
|
|||
|
|
url: dataUrl + 'video/getBallTreeData',
|
|||
|
|
data: {
|
|||
|
|
keyWord : keyWord
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function (result) {
|
|||
|
|
var obj = result.obj;
|
|||
|
|
if (obj == null && obj.length == 0) {
|
|||
|
|
layer.alert("暂无球机信息");
|
|||
|
|
} else {
|
|||
|
|
var data = parseTreeData(obj);
|
|||
|
|
var nodes = zNodes1.concat(data);
|
|||
|
|
$.fn.zTree.init($("#resourceTree"), setting1, nodes);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
error: function (e) {
|
|||
|
|
console.log(e.resMsg);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 解析返回的树数据及其结构
|
|||
|
|
* @param {Object} data
|
|||
|
|
* @param {Object} allNum
|
|||
|
|
*/
|
|||
|
|
function parseTreeData(data) {
|
|||
|
|
var allNum = 0;
|
|||
|
|
var onlineNum = 0;
|
|||
|
|
var noLineNum = 0;
|
|||
|
|
for (var i = 0; i < data.length; i++) {
|
|||
|
|
var nodeType = data[i].type;
|
|||
|
|
if (nodeType == 1) {
|
|||
|
|
data[i].icon = "../../img/video/jingyanyuan.png";
|
|||
|
|
} else if (nodeType == 2) {
|
|||
|
|
data[i].icon = "../../img/video/dong.png";
|
|||
|
|
} else if (nodeType == 3) {
|
|||
|
|
data[i].icon = "../../img/video/ceng.png";
|
|||
|
|
} else if (nodeType == 4) {
|
|||
|
|
allNum++;
|
|||
|
|
data[i].icon = "../../img/video/notOnline.png";
|
|||
|
|
if (data[i].onLine === '1') {
|
|||
|
|
onlineNum++;
|
|||
|
|
data[i].icon = "../../img/video/online.png";
|
|||
|
|
data[i].ballStatus = "1";
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$("#equipmentNmb").html(allNum);
|
|||
|
|
$("#onlineNmb").html(onlineNum);
|
|||
|
|
$("#OfflineNmb").html(allNum - onlineNum);
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dataClick() {
|
|||
|
|
var element1 = document.getElementById("details1");
|
|||
|
|
var element3 = document.getElementById("details3");
|
|||
|
|
var videoWindow = document.getElementById("videoWindow");
|
|||
|
|
var audioPlayer = document.getElementById("audioPlayer");
|
|||
|
|
var centerNumCenter = document.getElementById("center_num_center");
|
|||
|
|
var icon = document.getElementById("icon");
|
|||
|
|
let treeDiv = document.getElementById("treeDiv");
|
|||
|
|
var videoSwitch = document.getElementById("videoSwitch");
|
|||
|
|
|
|||
|
|
if (element1.style.display === "none") { // 如果第一个元素是隐藏状态audioPlayer
|
|||
|
|
videoWindow.style.display = "block"; // 切换为显示状态
|
|||
|
|
element1.style.display = "block"; // 切换为显示状态
|
|||
|
|
centerNumCenter.style.display = "block"; // 切换为显示状态
|
|||
|
|
element3.style.display = "none"; // 否则切换为隐藏状态
|
|||
|
|
audioPlayer.style.display = "none"; // 否则切换为隐藏状态
|
|||
|
|
icon.style.display = "none"; // 否则切换为隐藏状态
|
|||
|
|
treeDiv.style.height = "380px";
|
|||
|
|
videoSwitch.innerHTML = "视频监控";
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
videoWindow.style.display = "none"; // 否则切换为隐藏状态
|
|||
|
|
element1.style.display = "none"; // 否则切换为隐藏状态
|
|||
|
|
centerNumCenter.style.display = "none"; // 否则切换为隐藏状态
|
|||
|
|
element3.style.display = "block"; // 切换为显示状态
|
|||
|
|
audioPlayer.style.display = "block"; // 切换为显示状态
|
|||
|
|
icon.style.display = "block"; // 切换为显示状态
|
|||
|
|
treeDiv.style.height = "553px";
|
|||
|
|
videoSwitch.innerHTML = "历史视频";
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (clickCount === 0) {
|
|||
|
|
clickCount = 1;
|
|||
|
|
stopVideo(null, null, 2);
|
|||
|
|
} else if (clickCount === 1) {
|
|||
|
|
clickCount = 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//播放历史视频
|
|||
|
|
|
|||
|
|
// function loadVideo(url) {
|
|||
|
|
// // 创建一个 XMLHttpRequest 对象
|
|||
|
|
// var xhr = new XMLHttpRequest();
|
|||
|
|
//
|
|||
|
|
// // 发送 HEAD 请求，获取视频文件的状态码
|
|||
|
|
// xhr.open('HEAD', url, true);
|
|||
|
|
// xhr.onreadystatechange = function() {
|
|||
|
|
// if (xhr.readyState === 4) {
|
|||
|
|
// if (xhr.status === 200) {
|
|||
|
|
// var audioPlayer = document.getElementById('audioPlayer');
|
|||
|
|
// audioPlayer.src = url;
|
|||
|
|
//
|
|||
|
|
// } else if (xhr.status === 404) {
|
|||
|
|
// console.log('视频文件不存在，继续加载...');
|
|||
|
|
// layer.msg('视频加载中', {icon: 15});
|
|||
|
|
// setTimeout(function() {
|
|||
|
|
// loadVideo(url); // 递归调用自身再次发送请求
|
|||
|
|
// }, 3000); // 设置延迟时间（单位：毫秒），可以根据实际情况调整
|
|||
|
|
// } else {
|
|||
|
|
// // 其他状态码，处理错误情况
|
|||
|
|
// console.error("请求视频文件失败");
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// };
|
|||
|
|
// xhr.send();
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
function loadVideo(url) {
|
|||
|
|
// 创建一个 XMLHttpRequest 对象
|
|||
|
|
var xhr = new XMLHttpRequest();
|
|||
|
|
|
|||
|
|
// 发送 HEAD 请求，获取视频文件的状态码
|
|||
|
|
xhr.open('HEAD', url, true);
|
|||
|
|
xhr.onreadystatechange = function() {
|
|||
|
|
if (xhr.readyState === 4) {
|
|||
|
|
if (xhr.status === 200) {
|
|||
|
|
setTimeout(function() {
|
|||
|
|
const iframe = document.getElementById('audioPlayer');
|
|||
|
|
iframe.setAttribute('src', url);
|
|||
|
|
videoLoaded = true;
|
|||
|
|
const el = document.querySelector('.layui-icon-refresh-3');
|
|||
|
|
if (el) {
|
|||
|
|
el.addEventListener('click', function() {
|
|||
|
|
const iframe = document.getElementById('audioPlayer');
|
|||
|
|
iframe.setAttribute('src', url);
|
|||
|
|
videoLoaded = true;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, 5000);
|
|||
|
|
|
|||
|
|
} else if (xhr.status === 404) {
|
|||
|
|
console.log('视频文件不存在，继续加载...');
|
|||
|
|
layer.msg('视频加载中', {icon: 10});
|
|||
|
|
setTimeout(function() {
|
|||
|
|
loadVideo(url); // 递归调用自身再次发送请求
|
|||
|
|
}, 5000); // 设置延迟时间（单位：毫秒），可以根据实际情况调整
|
|||
|
|
} else {
|
|||
|
|
// 其他状态码，处理错误情况
|
|||
|
|
console.error("请求视频文件失败");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
xhr.send();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function playHistoricalVideo(startTime, endTime, videoType, channelId) {
|
|||
|
|
console.log('开始时间：', startTime + '结束时间：', endTime + '视频类型：', videoType + '通道号：', channelId);
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
url: dataUrl + 'video/playback',
|
|||
|
|
data: {
|
|||
|
|
startTime: startTime,
|
|||
|
|
endTime: endTime,
|
|||
|
|
channelId: channelId,
|
|||
|
|
videoType: videoType
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
let url = videoUrl + res.obj;
|
|||
|
|
console.log("url:"+ url);
|
|||
|
|
const iframe = document.getElementById('audioPlayer');
|
|||
|
|
iframe.src = '';
|
|||
|
|
//获取请求状态
|
|||
|
|
getReadyState(startTime, endTime, videoType, channelId, url);
|
|||
|
|
// loadVideo(url); // 调用加载视频的函数
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getReadyState( startTime, endTime, videoType, channelId, url) {
|
|||
|
|
|
|||
|
|
// 使用split方法将路径以斜杠为分隔符拆分成数组
|
|||
|
|
const segments = url.split('/');
|
|||
|
|
|
|||
|
|
// 获取数组中最后一个非空元素，即最后一个斜杠之后的内容
|
|||
|
|
const videoName = segments.filter(segment => segment !== '').pop();
|
|||
|
|
console.log(videoName);
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
url: dataUrl + 'video/getDownloadStatus',
|
|||
|
|
data: {
|
|||
|
|
videoName: videoName
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.obj === 17) {
|
|||
|
|
layer.msg('视频获取失败请稍等，正在重新获取...', {icon: 10});
|
|||
|
|
playHistoricalVideo(startTime, endTime, videoType, channelId); // 下载失败回调重新获取视频地址
|
|||
|
|
}else {
|
|||
|
|
loadVideo(url); // 调用加载视频的函数
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取树点击事件 执行播放视频
|
|||
|
|
function onTreeClick(event, treeId, treeNode, clickFlag) {
|
|||
|
|
console.log(clickCount)
|
|||
|
|
if (clickCount === 0) {
|
|||
|
|
if(playBallList.length > 0){
|
|||
|
|
if (playBallList[0].puid === "34020000001180000003"){
|
|||
|
|
playBallList[0].myPlayer.pause();
|
|||
|
|
playBallList[0].myPlayer.unload();
|
|||
|
|
playBallList[0].myPlayer.detachMediaElement();
|
|||
|
|
playBallList[0].myPlayer.destroy();
|
|||
|
|
playBallList[0].myPlayer = null;
|
|||
|
|
playBallList = [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let state = true;
|
|||
|
|
var ballFrom = treeNode.onLine;
|
|||
|
|
console.log("ballFrom=" + ballFrom);
|
|||
|
|
var puid = treeNode.puid;
|
|||
|
|
if (puid == '' || puid == "null") {
|
|||
|
|
layer.alert("puid为空！请联系运维人员核对！");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let ballStatus = treeNode.onLine;
|
|||
|
|
console.log("puid=" + puid);
|
|||
|
|
var name = treeNode.name;
|
|||
|
|
var ballIndex = treeNode.ballIndex;
|
|||
|
|
console.log("onTreeClick name=" + name);
|
|||
|
|
console.log("onTreeClick ballIndex=" + ballIndex);
|
|||
|
|
if (ballIndex == null) {
|
|||
|
|
ballIndex = '0';
|
|||
|
|
}
|
|||
|
|
if (ballStatus != 1) {
|
|||
|
|
alert("请选择在线视频观看");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!isEmpty(puid)) {
|
|||
|
|
//if (onLine === "1") {
|
|||
|
|
if (true) {
|
|||
|
|
//去除空播对象
|
|||
|
|
remove();
|
|||
|
|
$.each(playBallList, function (index, item) {
|
|||
|
|
if (!isEmpty(item)) {
|
|||
|
|
if (puid === item.puid) {
|
|||
|
|
//notify("此球机正在播放,请勿重复播放", "warning", "");
|
|||
|
|
ballScreen(item.selectedScreen.replace("video", ""));
|
|||
|
|
state = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (state) {
|
|||
|
|
$.each(videoList, function (index, item) {
|
|||
|
|
if (selectedScreen === item.selectedScreen) {
|
|||
|
|
if (!item.playState) {
|
|||
|
|
state = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//寻找没有播放视频的窗口
|
|||
|
|
if (state && playBallList.length > 0) {
|
|||
|
|
$.each(videoList, function (index, item) {
|
|||
|
|
if (!item.playState) {
|
|||
|
|
if (index < numOfWindows) {
|
|||
|
|
selectedScreen = item.selectedScreen;
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//视频替换
|
|||
|
|
$.each(playBallList, function (index, item) {
|
|||
|
|
if (!isEmpty(item)) {
|
|||
|
|
if (selectedScreen === item.selectedScreen) {
|
|||
|
|
if (item.start && item.myPlayer !== null) {
|
|||
|
|
item.token = '';
|
|||
|
|
item.myPlayer.pause();
|
|||
|
|
item.myPlayer.unload();
|
|||
|
|
item.myPlayer.detachMediaElement();
|
|||
|
|
item.myPlayer.destroy();
|
|||
|
|
item.myPlayer = null;
|
|||
|
|
playBallList.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
playBallList.push({
|
|||
|
|
puid: puid,
|
|||
|
|
selectedScreen: selectedScreen,
|
|||
|
|
window: 1,
|
|||
|
|
start: false,
|
|||
|
|
type: ballFrom,
|
|||
|
|
myPlayer: null,
|
|||
|
|
token : '',
|
|||
|
|
pathType: 2
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$.each(videoList, function (index, item) {
|
|||
|
|
if (selectedScreen === item.selectedScreen) {
|
|||
|
|
item.playState = true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//播放视频
|
|||
|
|
qxPlayVideo(puid, ballIndex);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
notify("请选择开机的球机", "warning", "");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}else if (clickCount === 1){
|
|||
|
|
layui.use('layer', function(){
|
|||
|
|
var layer = layui.layer;
|
|||
|
|
var startTime = document.getElementById('start-time').value;
|
|||
|
|
var endTime = document.getElementById('end-time').value;
|
|||
|
|
let videoType = treeNode.videoType;
|
|||
|
|
let channelId = treeNode.channelId;
|
|||
|
|
|
|||
|
|
if (startTime === '' || endTime === '') {
|
|||
|
|
|
|||
|
|
layer.msg('时间不能为空', {icon: 10});
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
// 计算起始时间和结束时间的间隔（单位：毫秒）
|
|||
|
|
var timeDiff = new Date(endTime).getTime() - new Date(startTime).getTime();
|
|||
|
|
|
|||
|
|
// 判断视频时长是否超过两小时（7200000毫秒）
|
|||
|
|
if (timeDiff > 7200000) {
|
|||
|
|
layer.msg('视频不能超过两小时', {icon: 6});
|
|||
|
|
} else {
|
|||
|
|
if (videoLoaded) {
|
|||
|
|
videoLoaded = false;
|
|||
|
|
playHistoricalVideo(startTime, endTime, videoType, channelId);
|
|||
|
|
}else {
|
|||
|
|
// 弹出提示框询问用户是否确定关闭当前视频
|
|||
|
|
layer.confirm('当前视频正在加载，是否确定关闭？', {icon: 3, title:'提示'}, function(index){
|
|||
|
|
playHistoricalVideo(startTime, endTime, videoType, channelId);
|
|||
|
|
layer.close(index); // 关闭提示框
|
|||
|
|
}, function(index){
|
|||
|
|
// 用户点击取消，则关闭当前操作，不发送新的请求
|
|||
|
|
layer.close(index); // 关闭提示框
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//防止重复播放，与去掉空播对象
|
|||
|
|
function remove() {
|
|||
|
|
$.each(playBallList, function (index, item) {
|
|||
|
|
if (!isEmpty(item)) {
|
|||
|
|
if (item.window === null) {
|
|||
|
|
playBallList.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 播放视频
|
|||
|
|
* @param puId
|
|||
|
|
* @param idx
|
|||
|
|
*/
|
|||
|
|
function qxPlayVideo(puId, idx) {
|
|||
|
|
setTimeout(function () {
|
|||
|
|
readyPlay(puId, idx);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//开始播放视频
|
|||
|
|
function readyPlay(puId, idx) {
|
|||
|
|
//若是清晰平台，删除连接对象
|
|||
|
|
// mySet.delete(selectedScreen);
|
|||
|
|
var tk = token1;
|
|||
|
|
var pathType = 2;
|
|||
|
|
let url = _cf_1.q2http_url + "stream.flv?puid=" + puId + "&idx=" + idx + "&stream=0&token=" + token1;
|
|||
|
|
if (playBallList.length > 5) {
|
|||
|
|
url = _cf.q2http_url + "stream.flv?puid=" + puId + "&idx=" + idx + "&stream=0&token=" + token2;
|
|||
|
|
tk = token2;
|
|||
|
|
pathType = 1;
|
|||
|
|
console.log("tk=============="+tk)
|
|||
|
|
}
|
|||
|
|
console.log("playBallList1111=" + JSON.stringify(playBallList));
|
|||
|
|
//循环视频播放列表
|
|||
|
|
var isPlay = null;
|
|||
|
|
$.each(playBallList, function (index, item) {
|
|||
|
|
if (!isEmpty(item)) {
|
|||
|
|
if (selectedScreen === item.selectedScreen) {
|
|||
|
|
if (item.window !== null) {
|
|||
|
|
var playObj = item.myPlayer
|
|||
|
|
isPlay = item.start;
|
|||
|
|
try {
|
|||
|
|
var myPlayer = flvjs.createPlayer({
|
|||
|
|
type: 'flv',
|
|||
|
|
url: url,
|
|||
|
|
isLive: true,
|
|||
|
|
hasAudio: false
|
|||
|
|
}, {
|
|||
|
|
enableWorker: false,
|
|||
|
|
autoCleanupSourceBuffer: true, //清理缓冲区
|
|||
|
|
enableStashBuffer: false,
|
|||
|
|
stashInitialSize: 128, // 减少首桢显示等待时长
|
|||
|
|
statisticsInfoReportInterval: 600,
|
|||
|
|
// fixAudioTimestampGap : false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myPlayer.attachMediaElement(document.getElementById(item.selectedScreen));
|
|||
|
|
myPlayer.load();
|
|||
|
|
setTimeout(function () {
|
|||
|
|
myPlayer.play();
|
|||
|
|
}, 200);
|
|||
|
|
item.myPlayer = myPlayer;
|
|||
|
|
item.start = true;
|
|||
|
|
item.token = tk;
|
|||
|
|
item.pathType = pathType;
|
|||
|
|
|
|||
|
|
console.log("playBallList222=" + JSON.stringify(playBallList));
|
|||
|
|
console.log("item.token==========" + item.token);
|
|||
|
|
} catch (e) {
|
|||
|
|
alert("该视频不在线。。。");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
$('#video' + selectedScreen + '_html5_api').css("width", "100%");
|
|||
|
|
$('#video' + selectedScreen + '_html5_api').css("height", "100%");
|
|||
|
|
$('#video' + selectedScreen).css("width", "100%");
|
|||
|
|
$('#video' + selectedScreen).css("height", "100%");
|
|||
|
|
$('#video' + selectedScreen + '_html5_api').css("background-color", "black");
|
|||
|
|
$('.vjs-text-track-display').hide();
|
|||
|
|
$('.vjs-loading-spinner').hide();
|
|||
|
|
$('.vjs-big-play-button').hide();
|
|||
|
|
$('.vjs-control-bar').hide();
|
|||
|
|
$('.vjs-error-display').hide();
|
|||
|
|
$('.vjs-error-display').hide();
|
|||
|
|
$('.vjs-modal-dialog').hide();
|
|||
|
|
$('.vjs-poster').removeAttr("class");
|
|||
|
|
$('.video' + selectedScreen + '-dimensions').css("width", "100%");
|
|||
|
|
$('.video' + selectedScreen + '-dimensions').css("height", "100%");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @param {*} player 播放控件对象
|
|||
|
|
* @param {*} index playBallList 下标，第几个
|
|||
|
|
* @param {*} type 类型 1切换窗口关闭视频，2主动关闭视频
|
|||
|
|
*/
|
|||
|
|
function stopVideo(player, index, type) {
|
|||
|
|
if (type == 1) {
|
|||
|
|
player.unload();
|
|||
|
|
player.detachMediaElement();
|
|||
|
|
player.destroy();
|
|||
|
|
player = null;
|
|||
|
|
videoList.splice(index, 1);
|
|||
|
|
for (let i = 0; i < videoList.length; i++) {
|
|||
|
|
if (selectedScreen === videoList[i].selectedScreen) {
|
|||
|
|
videoList[i].playState = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
$.each(playBallList, function (index, item) {
|
|||
|
|
if (!isEmpty(item)) {
|
|||
|
|
if (selectedScreen === item.selectedScreen) {
|
|||
|
|
let start = item.start;
|
|||
|
|
let player = item.myPlayer;
|
|||
|
|
item.token = '';
|
|||
|
|
if (start && player !== null) {
|
|||
|
|
player.pause();
|
|||
|
|
player.unload();
|
|||
|
|
player.detachMediaElement();
|
|||
|
|
player.destroy();
|
|||
|
|
player = null;
|
|||
|
|
playBallList.splice(index, 1);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
for (let i = 0; i < videoList.length; i++) {
|
|||
|
|
if (selectedScreen === videoList[i].selectedScreen) {
|
|||
|
|
videoList[i].playState = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//1个视频
|
|||
|
|
function ballOne() {
|
|||
|
|
setBallNumBtnStyle(1);
|
|||
|
|
numOfWindows = 1;
|
|||
|
|
document.getElementById("ball1").style.cssText = "width: 97%;height: 98.6%;float:left";
|
|||
|
|
document.getElementById("video1").style.cssText = "width: 100%;height: 100%;";
|
|||
|
|
$('.video1-dimensions').css("width", "100%");
|
|||
|
|
$('.video1-dimensions').css("height", "100%");
|
|||
|
|
// $.each(playBallList, function (index, item) {
|
|||
|
|
// if (!isEmpty(item)) {
|
|||
|
|
// if (item.selectedScreen !== "video1") {
|
|||
|
|
// let start = item.start;
|
|||
|
|
// let player = item.myPlayer;
|
|||
|
|
// if(start && player != null){
|
|||
|
|
// stopVideo(player,index,1);
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
for (var i = 2; i <= 9; i++) {
|
|||
|
|
document.getElementById("ball" + i).style.display = "none";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let i = 2; i <= 9; i++) {
|
|||
|
|
videoList[i - 1].playState = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//4个视频
|
|||
|
|
function ballFour() {
|
|||
|
|
setBallNumBtnStyle(4);
|
|||
|
|
numOfWindows = 4;
|
|||
|
|
// $.each(playBallList, function (index, item) {
|
|||
|
|
// if (!isEmpty(item)) {
|
|||
|
|
// if (item.selectedScreen.replace("video","") > 4 ) {
|
|||
|
|
// let start = item.start;
|
|||
|
|
// let player = item.myPlayer;
|
|||
|
|
// if(start && player != null){
|
|||
|
|
// stopVideo(player,index,1);
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
for (var i = 1; i < 5; i++) {
|
|||
|
|
document.getElementById("ball" + i).style.cssText = "width: 48.5%;height: 48.8%;float:left";
|
|||
|
|
document.getElementById("video" + i).style.cssText = "width: 100%;height: 100%;";
|
|||
|
|
$('.video' + i + '-dimensions').css("width", "100%");
|
|||
|
|
$('.video' + i + '-dimensions').css("height", "100%");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (var i = 5; i <= 9; i++) {
|
|||
|
|
document.getElementById("ball" + i).style.display = "none";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let i = 5; i <= 9; i++) {
|
|||
|
|
videoList[i - 1].playState = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//9个视频
|
|||
|
|
function ballNine() {
|
|||
|
|
setBallNumBtnStyle(9);
|
|||
|
|
numOfWindows = 9;
|
|||
|
|
for (var i = 1; i <= 9; i++) {
|
|||
|
|
document.getElementById("ball" + i).style.cssText = "width: 32.2%;height: 32%;float:left";
|
|||
|
|
document.getElementById("video" + i).style.cssText = "width: 100%;height: 100%;";
|
|||
|
|
$('.video' + i + '-dimensions').css("width", "100%");
|
|||
|
|
$('.video' + i + '-dimensions').css("height", "100%");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//设置球机上方数字样式
|
|||
|
|
function setBallNumBtnStyle(type) {
|
|||
|
|
var a = [1, 4, 9];
|
|||
|
|
for (var i = 0; i < a.length; i++) {
|
|||
|
|
if (a[i] == type) {
|
|||
|
|
document.getElementById('ballBtn' + type).style.background = '#17CBAE';
|
|||
|
|
} else {
|
|||
|
|
document.getElementById('ballBtn' + a[i]).style.background = 'transparent';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//单机球机页面点击
|
|||
|
|
var timer = null; //定义一个变量存放定时器
|
|||
|
|
function singleClick(t) {//
|
|||
|
|
if (timer) { //取消上次延时未执行的方法
|
|||
|
|
window.clearTimeout(timer);
|
|||
|
|
timer = null;
|
|||
|
|
}
|
|||
|
|
timer = window.setTimeout(function () {
|
|||
|
|
ballScreen(t);
|
|||
|
|
}, 300);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//添加单机视频框样式
|
|||
|
|
function ballScreen(t) {
|
|||
|
|
$.each($('.ballsplit'), function (index, item) {
|
|||
|
|
$($('.ballsplit')[index]).removeClass("selectedContent")
|
|||
|
|
});
|
|||
|
|
selectedScreen = "video" + t;
|
|||
|
|
$("#ball" + t).addClass("selectedContent");
|
|||
|
|
let result = playBallList.some((item => {
|
|||
|
|
if (item.selectedScreen === "video" + t) {
|
|||
|
|
console.log("item.puid===========" + item.puid);
|
|||
|
|
console.log("item.state===========" + item.start);
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//双击球机页面
|
|||
|
|
function doubleClick(t) {
|
|||
|
|
if (timer) { //取消上次延时未执行的方法
|
|||
|
|
window.clearTimeout(timer);
|
|||
|
|
}
|
|||
|
|
var div = document.getElementById("ball" + t);
|
|||
|
|
if (status == 1) { //全屏
|
|||
|
|
$("#video" + t).css("width", "100%");
|
|||
|
|
$("#video" + t).css("height", "100%");
|
|||
|
|
if (div.requestFullscreen) {
|
|||
|
|
div.requestFullscreen();
|
|||
|
|
} else if (div.msRequestFullscreen) {
|
|||
|
|
div = document.body;
|
|||
|
|
div.msRequestFullscreen();
|
|||
|
|
} else if (div.mozRequestFullScreen) {
|
|||
|
|
div.mozRequestFullScreen();
|
|||
|
|
} else if (div.webkitRequestFullScreen) {
|
|||
|
|
div.webkitRequestFullScreen();
|
|||
|
|
}
|
|||
|
|
status = 2;
|
|||
|
|
} else if (status == 2) { //关闭全屏
|
|||
|
|
if (numOfWindows == 1) {
|
|||
|
|
$("#" + t).css("width", "97%");
|
|||
|
|
$("#" + t).css("height", "98.6%");
|
|||
|
|
$("#" + t).css("float", "left");
|
|||
|
|
} else if (numOfWindows == 4) {
|
|||
|
|
$("#" + t).css("width", "48.5%");
|
|||
|
|
$("#" + t).css("height", "48.8%");
|
|||
|
|
$("#" + t).css("float", "left");
|
|||
|
|
} else {
|
|||
|
|
$("#" + t).css("width", "32.2%");
|
|||
|
|
$("#" + t).css("height", "32%");
|
|||
|
|
$("#" + t).css("float", "left");
|
|||
|
|
}
|
|||
|
|
if (document.exitFullscreen) {
|
|||
|
|
document.exitFullscreen();
|
|||
|
|
} else if (document.msExitFullscreen) {
|
|||
|
|
document.msExitFullscreen();
|
|||
|
|
} else if (document.mozCancelFullScreen) {
|
|||
|
|
document.mozCancelFullScreen();
|
|||
|
|
} else if (document.webkitCancelFullScreen) {
|
|||
|
|
document.webkitCancelFullScreen();
|
|||
|
|
}
|
|||
|
|
status = 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//判空
|
|||
|
|
function isEmpty(str) {
|
|||
|
|
if (str == undefined || str == null || str == "null" || str == "") {
|
|||
|
|
return true;
|
|||
|
|
} else {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|