前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >海康、大华NVR硬件录像机录像无插件全平台访问实现--播放时间轴实现

海康、大华NVR硬件录像机录像无插件全平台访问实现--播放时间轴实现

作者头像
EasyNVR
发布2020-04-23 16:00:07
1.1K0
发布2020-04-23 16:00:07
举报
文章被收录于专栏:EasyNVR

在之前的博文中我们有介绍方案NVR硬件录像机web无插件播放方案(支持取特定时间段视频流);该片博文旨在介绍时间轴功能的实现和相关接口的调用;

时间轴样式展示:

easynvr
easynvr
问题分析:

对于 时间轴的展示实现需要实现的是时间刻度尺的展示,刻度尺的实现就是展示出时间刻度和对应时间是否拥有录像的标识,当前拥有录像的标识就是绿色背景的。 其次就是时间刻度滑标,目的用于显示选择出对应的时间点,来开始 播放对应的录像文件,和跳转到对应的时间点来开始录像的直播。

前端实现代码: html css部分:

代码语言:javascript
复制
    .time-rule {
        overflow: hidden;
        position: relative;
        height: 50px;
        margin: 0 auto;
        width: 100%;
        font-size: 12px;
        max-width: 1440px;
        background-color: #CCC;
        margin-top: 30px;
    }
    .time-day {
        position: absolute;
        left:0;
        top:0;
        height: 100%;
        width: 1440px;
        cursor: pointer;
    }   
    .time-minute {
        float: left;
        width: 1px;
        height: 8px;
        margin: 0;
        /*background: green*/
    }
    .time-minute.active {
        background-color: green;
    }
    .time-text {
        float: left;
        width: 60px;
        border-left: 1px solid #999;
        border-top : 1px solid #999;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        height: 25px;
        line-height: 25px;
    }
    .time-00 {
        border-left : 0;
    }   
    .time-cursor {
        position: absolute;
        left:0;
        top:0;
        height: 30px;
        width: 2px;
        background-color: red;
        text-align: center;
    }
    .time-cursor-text {
        position: absolute;
        padding: 0 5px;
        width : 60px;
        left : -30px;
        top: 30px;
        border : 1px solid red;
        height: 15px;
        line-height: 15px;
        cursor: move;
        background-color: white;
        -ms-user-select: none;
        user-select: none;
    }



 <div class="time-rule">
    <div class="time-day">
    </div>
    <div class="time-cursor">
        <div class="time-cursor-text">00:00</div>
    </div>
 </div>

js部分:

代码语言:javascript
复制
function onTimeUpdate(){
        if($(".time-cursor").position().left >= 1440 + $(".time-day").position().left){
            $(".time-cursor")[0].style.left = (1440 - 1 + $(".time-day").position().left) + "px";
        }
        var m = moment().hour(0).minute($(".time-cursor").position().left - $(".time-day").position().left);
        $(".time-cursor-text").text(m.format("HH:mm")).data("changed", true);
    }
    function renderTimeTexts(){
        $(".time-day .time-text").remove();
        for(var i = 0; i< 24; i++){
            var $text = $("<div class='time-text'></div>");
            var m = moment().hour(i).minute(0).second(0);
            $text.text(m.format("HH:mm"));
            $text.addClass("time-" + m.format("HH"));
            $(".time-day").append($text);
        }
    }

    function renderTimeMinutes(){
        $(".time-day .time-minute").remove();
        for (var i = 0; i < 1440; i++) {
            var $minute = $("<div class='time-minute'></div>");
            var m = moment().hour(0).minute(i);
            $minute.addClass("time-" + m.format("HH-mm"));
            $(".time-day").append($minute);
        }
    }
    if (isIntegrate) {
        $(".main-header").show();
        $("#guangchang").attr("href","/index.html?isIntegrate=true")
    }
    $(document).on("click",".box-header .form-group .date",function(e){
        $('.datepicker').datepicker({
            format: 'mm/dd/yyyy',
            startDate: '-3d'
        });
    })
    $(document).on("mousedown", ".time-cursor-text,.time-day", function (e) {
        $(this).data("pageX", e.pageX);
    }).on("mouseup", function (e) {
        if($(".time-cursor-text").data("changed")){
            onChangeTime();
            $(".time-cursor-text").removeData("changed");
        }
        $(".time-cursor-text,.time-day").removeData("pageX");
    }).on("mousemove", function (e) {
        var pageX = $(".time-cursor-text").data("pageX");
        if (pageX != undefined) {
            $(".time-cursor-text").data("pageX", e.pageX);
            var moveX = e.pageX - pageX;
            var left = $(".time-cursor").position().left + moveX;
            left = left < 0 ? 0 : left;
            left = left > ($(".time-rule").innerWidth() - 1) ? ($(".time-rule").innerWidth() - 1) : left;
            $(".time-cursor")[0].style.left = left + "px";
            onTimeUpdate();
        }
        pageX = $(".time-day").data("pageX");
        var curLeft = $(".time-day").position().left;
        if(pageX != undefined && ($(".time-rule").innerWidth() < $(".time-day").outerWidth() || curLeft < 0)){
            $(".time-day").data("pageX", e.pageX);
            var moveX = e.pageX - pageX;
            var left = $(".time-day").position().left + moveX;
            left = left > 0 ? 0 : left;
            var minLeft = $(".time-rule").innerWidth() - $(".time-day").outerWidth();
            left = left < minLeft ? minLeft : left;
            $(".time-day")[0].style.left = left + "px";
            onTimeUpdate();
        }
    }).on("mousedown",".time-minute",function(e){
        var left = $(this).position().left + $(".time-day").position().left;
        $(".time-cursor")[0].style.left = left + "px";
        onTimeUpdate();
    })

主要是通过时间十分渲染出对应的div,以一个div对应一个时间(时、分);然后给予对应的背景来表示对应的时间段是否有录像文件,还有 就是通过定位 来实现标尺和滑标的运动以及运动到的对应的位置获取到对应的时间信息。

对应接口获取到对应的信息:
代码语言:javascript
复制
http://127.0.0.1:10800/api/v1/gethwnvrrecordbyday?id=1&channel=3&day=20180316
代码语言:javascript
复制
{
    "EasyDarwin": {
        "Body": {
            "Channels": [
                {
                    "Duration": 1261,
                    "Name": "ch0003_00000000372000000",
                    "StartTime": "15:29:24"
                }
            ],
            "FileCount": "1"
        },
        "Header": {
            "CSeq": "1",
            "ErrorNum": "200",
            "ErrorString": "Success OK",
            "MessageType": "MSG_DS_HWNVR_QUERY_RECORD_BY_DAY_ACK",
            "Version": "v1"
        }
    }
}

根据 获取到的 对应时段的录像信息,通过开始时间和录像时长来 确定这个时间端有录像信息 ,然后通过前端渲染对应的展示出来。

选择时间点跳转,就是 获取到对应的时间点信息和是否有录像信息,然后对应的播放开始播放起来。

效果展示:

easynvr
easynvr

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题分析:
  • 对应接口获取到对应的信息:
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档