根据视频ocx插件写出录像回放的时间轴,留着自己备忘
jQuery.utility = {
scale: function (id, num) {//拼接html形成刻度尺
var width = $(id).width();
var hour = width / num; //大格的刻度
var min = hour / 10; //小格的刻度
if (num > 1) {
for (var i = 0; i < (num + 1); i++) {
$(id).append('' + i + '');
if (i != (num)) {
for (var j = 1; j < 10; j++) {
var left = Number(i * hour) + Number(j * min);
if (j == 5) {
$(id).append('');
} else {
$(id).append('');
}
}
}
}
}
},
hidden: function (num, id) {//生成hidden控件
for (var j = 0; j < num; j++) {
var input = document.createElement("input"); //创建input
input.setAttribute("type", "hidden"); //设置type属性
input.setAttribute("id", id + j); //id
document.body.appendChild(input); //插入到body内
}
},
gettime: function (ck) {//根据鼠标点击位置生成时间
var e = window.event || even;
var width = $(ck).width() / (24 * 60 * 60); //计算出刻度/秒
var show = e.offsetX / width; //计算总秒数
var ss = parseInt(show); // 秒
var min = 0; // 分
var hour = 0; // 小时
//根据秒数计算时钟和分钟
if (ss > 60) {
min = parseInt(ss / 60);
ss = parseInt(ss % 60);
if (min > 60) {
hour = parseInt(min / 60);
min = parseInt(min % 60);
}
}
var result = "" + parseInt(ss) + "";
if (ss < 10)//生成标准时间格式的秒钟
result = "0" + parseInt(ss) + "";
if (min > 0) {//生成标准时间格式的分钟
if (min < 10)
result = "0" + parseInt(min) + ":" + result;
else
result = "" + parseInt(min) + ":" + result;
} else {
result = "00:" + result;
}
if (hour > 0) {//生成标准时间格式的时钟
if (hour < 10)
result = "0" + parseInt(hour) + ":" + result;
else
result = "" + parseInt(hour) + ":" + result;
} else {
result = "00:" + result;
}
return result;
}
}
//var is = 1;
$.fn.timeline = function () {
this.table = function (tab) {//生成时间轴结构
var trnum = Number(tab) + 1;
for (var i = 0; i < trnum; i++) {
if (i == 0) {
this.append(' '
+ ' ');
} else {
this.append('窗口' + i + '
');
}
}
$.utility.hidden(4, "end");
$.utility.hidden(4, "left");
}
this.scale = function (num) {//生成指定数量刻度尺
var width = $("#scale").width();
var hour = width / num; //大格的刻度
var min = hour / 10; //小格的刻度
if (num > 1) {
for (var i = 0; i < (num + 1); i++) {
$("#scale").append('' + i + '');
if (i != (num)) {
for (var j = 1; j < 10; j++) {
var left = Number(i * hour) + Number(j * min);
if (j == 5) {
$("#scale").append('');
} else {
$("#scale").append('');
}
}
}
}
}
}
this.video = function (ChnlName, windowsid, lpStartTime, is, EndTime) {//查询录像,按时间段显示
var d1 = lpStartTime.replace(/\-/g, "/");
var date1 = new Date(d1);
var d2 = EndTime.replace(/\-/g, "/");
var date2 = new Date(d2);
var fen = parseInt(date2 - date1) / 1000 / 60;
//var ChnlName = $("#spid").val();
var width = $("#ck" + windowsid).width() / (24 * 60);
var hour = lpStartTime.split(' ');
var time = hour[1].split(':');
var left = (Number(time[0] * 60) + Number(time[1])) * width;
var lx, ox, left;
var statu = false;
if (is == 2) {
$("#ck" + windowsid).append("" +
"");
$("#jindu" + windowsid).mousedown(function (e) {
lx = $("#jindu" + windowsid).css("margin-left").replace("px", "");
ox = e.clientX - lx;
statu = true;
});
$(document).mouseup(function () {
statu = false;
});
$("#fide" + windowsid).mousemove(function (e) {
if (statu) {
var kedu = $("#ck" + windowsid).width() / (24 * 60 * 60); //刻度
var last = $("#ck" + windowsid).children("div:last-child").css("margin-left").replace("px", "");
var first = $("#ck" + windowsid).children("div").eq(1).css("margin-left").replace("px", "");
var la = Number(last) + Number(180 * kedu);
// if (reltime == edtime || marleft > la)
// marleft = la;
left = e.clientX - ox;
if (left < first) {
left = first;
}
if (left > (Number(last) + 2)) {
left = Number(last) + 2;
}
$("#jindu" + windowsid).css('margin-left', left);
mouseup($("#fide" + windowsid), windowsid, ChnlName);
}
});
}
$("#ck" + windowsid).append("");
}
this.showSpi = function (windowsid, dvid, endtime) {//点击初始化
$('#ck' + windowsid).html("");
$('#p' + windowsid).text(dvid);
$("#end" + windowsid).val(endtime);
}
this.schedule = function (bgtime, edtime, reltime, windowsid) {//移动录像播放进度
var kedu = $("#ck" + windowsid).width() / (24 * 60 * 60); //刻度
var timecha = Number(reltime) - Number(bgtime); //时间差 播放值-开始值
var width = timecha * kedu;
var mar = $("#left" + windowsid).val().replace("px", ""); //保存在隐藏控件的初始偏差值
var marleft = Number(mar) + Number(width) - 1; //偏差值=移动距离+初始偏差值
if ($("#ck" + windowsid).children().length > 0) {
var last = $("#ck" + windowsid).children("div:last-child").css("margin-left").replace("px", "");
var la = Number(last) + Number(180 * kedu);
if (reltime == edtime || marleft > la)
marleft = la;
}
$("#jindu" + windowsid).css("margin-left", marleft + "px"); //移动偏移
}
return this;
}
function mouseup(ck, num, spid) {//点击时间点进行录像回放
var e = window.event || even;
var result = $.utility.gettime(ck);//点击的时间
var endtime = $("#end" + num).val(); //查询时的结束时间
var clicktime = result.replace(":", "").replace(":", "");
var set = $("#ck" + num).children("div:last-child").attr("title"); //最后一个录像文件的结束时间
var stat = $("#ck" + num).children("div").eq(1).attr("title").split(" ")[1].replace(":", "").replace(":", "");
//alert(stat-300);
var end = set.split(" ")[1].replace(":", "").replace(":", "");
if (Number(clicktime) <= Number(end) && Number(clicktime) >= Number(stat - 300)) {
$("#jindu" + num).css("display", "block");
$("#jindu" + num).css("margin-left", e.offsetX + "px");
$("#left" + num).val(e.offsetX + "px");
var year = endtime.split(" ")[0];
var lpStartTime = year + " " + result;
clientd2.OCX_OpenRecord_ByTime(spid, lpStartTime, set, num); //set也可以是endtime
} else { alert("此时间点没有查询到录像!"); }
}
初始化
把录像文件以时间段的形式显示在时间轴上
获取播放录像进度加载进度条
初始录像信息
插件下载地址