海康威视时间轴

Posted 2021-02-28 zmy2020

这个js是从github上找的版本，只能拖动时间轴的方式，后续看看能不能做成像播放器那样的

 

代码是回放一段很小的视频段的特定代码，如果有其他需求，还可以再此基础上修改。

Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "H+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}


/**
 *
 * @param id  元素id
 * @param callback 拖拽回调函数
 * @constructor
 */

function VideoLine(id, callback) {
    var _this = this;
    var timeStr = $(‘#startTime‘).val();
    this.time = this.vId = new Date(timeStr.replace(/-/g, "/")).getTime();
    var target = this.target = $("#" + id).css("position", "relative");
    this.currentTimeBox = $("<span style=‘position: absolute; top:2px;font-size: 12px;‘></span>");
    //调整刻度长短
    this.hourWidth = 4800;
    this.hourSplit = 6;
    this.lock = false;
    this.data = [];
    this.callback = callback;

    this.getWidth = function () {
        return target.width();
    }
    this.getHeight = function () {
        return target.height();
    }

    this.getSecondWidth = function () {
        return this.hourWidth / 3600;
    }
    this.getMinutesToMillSeconds = function (minutes) {
        return minutes * 60 * 1000;
    }

    this.getMiddleLineX = function () {
        return this.getWidth() / 2 - 0.5;
    }

    target.mousedown(function (e) {
        _this.lock = true;
        var x = e.clientX;
        target.mousemove(function (event) {
            var distanceX = event.clientX - x;
            var move_seconds = -distanceX / _this.getSecondWidth();
            _this.time += move_seconds * 1000;
            _this.update(_this.time, true);
            x = event.clientX;
        });
    });

    $(‘#videoLine‘).mouseup(function (event) {//鼠标抬起事件  关闭移动事件
        target.off("mousemove");
        _this.lock = false;
        if ($.isFunction(_this.callback)) {
            callback(_this.time);
        }
    });

    this.update = function (time, self) {
        if (this.lock && !self) return;
        var time = this.time = time;
        this.currentTimeBox.text(new Date(time).format("yyyy-MM-dd HH:mm:ss"));
        this.currentTimeBox.css({
            left: _this.getMiddleLineX() - _this.currentTimeBox.width() / 2
        });
        var itemMinutes = 60 / this.hourSplit;
        var itemWidth = this.hourWidth / this.hourSplit;
        this.target.find(".removeAble").remove();
        this.updateLeftOrRight(true, time, itemMinutes, itemWidth);
        this.updateLeftOrRight(false, time, itemMinutes, itemWidth);
        this.updateData(this.data);
    }

    this.updateData = function (data) {
        if (!data || !$.isArray(data)) return;
        this.data = data;
        this.target.find(".removeAbleData").remove();
        $.each(data, function (index, item) {
            if (!item.start || !item.end) return;
            var sx = (item.start - _this.time) / 1000 * _this.getSecondWidth() + _this.getMiddleLineX();
            var ex = (item.end - _this.time) / 1000 * _this.getSecondWidth() + _this.getMiddleLineX();
            sx = sx < 0 ? 0 : sx > _this.getWidth() ? _this.getWidth() : sx;
            ex = ex < 0 ? 0 : ex > _this.getWidth() ? _this.getWidth() : ex;
            var _item = $("<span  class=‘removeAble removeAbleData‘ style=‘position: absolute; background: dodgerblue; left:" + sx + "px; top: " + (_this.getHeight() / 2 - 7) + "px; height:5px; width:" + (ex - sx) + "px‘>");
            _this.target.append(_item);
        });
    }

    this.updateLeftOrRight = function (left, time, itemMinutes, itemWidth) {
        var distanceSeconds = time % (itemMinutes * 60 * 1000);
        var distanceX = 0;
        var nextTime = 0;
        if (distanceSeconds > 0) {
            nextTime = left ? time - distanceSeconds : time - distanceSeconds + this.getMinutesToMillSeconds(itemMinutes)
        } else {
            nextTime = left ? time - this.getMinutesToMillSeconds(itemMinutes) : time + this.getMinutesToMillSeconds(itemMinutes);
        }
        distanceX = -(this.time - nextTime) / 1000 * _this.getSecondWidth();
        var height = 5;
        var x = this.getMiddleLineX() + distanceX;
        if (x < 0 || x > this.getWidth()) return;
        if (nextTime % _this.getMinutesToMillSeconds(60) == 0) {
            height = 10;
            var hourText = $("<span class=‘removeAble‘ style=‘position: absolute; font-size: 11px;‘>" + new Date(nextTime).getHours() + ":00</span>");
            this.target.append(hourText)
            hourText.css({
                left: x - hourText.width() / 2,
                top: _this.getHeight() / 2 + 10
            })
        }
        this.target.append($("<span class=‘removeAble‘ style=‘position: absolute; top:" + this.getHeight() / 2 + "px; background: #000; width:1px; height: " + height + "px; left: " + x + "px;‘/>"));
        this.updateLeftOrRight(left, nextTime, itemMinutes, itemWidth);
    }
    var middleLine = $("<div id=‘middleLine" + this.vId + "‘ style=‘position: absolute; opacity: 0.6; background: red; width: 1px; " +
        "height: " + this.getHeight() + "px; left:" + this.getMiddleLineX() + "px‘/>");

    target.append("<div style=‘position: absolute; top:" + this.getHeight() / 2 + "px; width: " + this.getWidth() + "px; height: 1px; background: #000;‘></div>");
    target.append(middleLine)
    target.append(this.currentTimeBox)
    this.update(this.time);
}


//播放代码，可以根据自己需要修改
var moviePlay = function (st, et) {
    var PreviewActiveX = document.getElementById("PreviewActiveX");
    if ($("#monitorType").length > 0) {
        type = $("#monitorType").combobox(‘getValue‘);
    }
    var urlAuth = $("#monitorUrl").combobox(‘getValue‘).split("||");
    PreviewActiveX.HWP_Play(urlAuth[0], urlAuth[1], 0, st, et);
    console.log($("#monitorUrl").combobox(‘getValue‘));
};

$(function () {
    var starTimeStr = $(‘#startTime‘).val();
    var endTimeStr = $(‘#endTime‘).val();
    var startDate = new Date(starTimeStr.replace(/-/g, "/"));
    var endDate = new Date(endTimeStr.replace(/-/g, "/"));
    var et = $("#endTime").val().replace(/-/g, "").replace(/:/g, "").replace(" ", "T") + "Z";
    if (starTimeStr && endTimeStr)
    {
        var vL = new VideoLine("videoLine", function (time) {
            var currentTime = new Date(time);
            var stStr = new Date(time).format("yyyy-MM-dd HH:mm:ss");
            var st = stStr.replace(/-/g, "").replace(/:/g, "").replace(" ", "T") + "Z";
            if (currentTime > endDate || currentTime < startDate) {
                PreviewActiveX.HWP_Stop(0);
            }
            else
            {
                PreviewActiveX.HWP_Stop(0);
                moviePlay(st, et);
            }
            
        });
        //定义蓝条的代码，可以在中括号中继续添加大括号组，来定义多个蓝条
        var data = [{
            start: startDate.getTime(),
            end: endDate.getTime()
        }];

        vL.updateData(data);
    }  
})