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