EasyNVR如何实现前端录像时间轴播放？

在之前的博文中我们为大家介绍了EasyNVR实现Web无插件播放方案，场景很多，大家可以关注我们的博客进行了解。EasyNVR软件版本支持视频录像回放，本文我们介绍一下时间轴功能的实现和相关接口的调用。

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

前端实现代码：

html css部分：

.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部分：

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对应一个时间（时、分），然后给予对应的背景来表示对应的时间段是否有录像文件，还有就是通过定位来实现标尺和滑标的运动，以及运动到对应的位置获取到对应的时间信息。

对应接口获取到对应的信息：

http://127.0.0.1:10800/api/v1/gethwnvrrecordbyday?id=1&channel=3&day=20180316
{"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如何实现前端录像时间轴播放？相关推荐

使用LiveGBS GB28181平台监控视频录像回放如何在页面上嵌入录像时间轴
支持云端录像及设备录像的时间轴页面分享iframe页面集成时间轴录像回看页面 1.时间轴回放分享页面 1.1. iframe示例 1.2. 页面可配置参数 1.3.设备录像示例 1.4.云端录像示例 ...
可以缩放平移的时间刻度尺，方便自定义UI需求。仿萤石云历史录像时间轴
https://github.com/Liberations/TimeRuler TimeRuler [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ijjdgeFo-1 ...
VUE实现时间轴播放组件
先上效果图吧 1.初始化的效果!2.可以拖拽,鼠标放上显示时间 3.播放按钮后,正常播放左右两个横线可以上一页下一页下面说VUE接入的步骤: 1.index.html中引入js和css文件 < ...
如何实现集成GB28181监控平台LiveGBS的录像回放时间轴页面
@ 目录 1.时间轴回放分享页面 1.1. iframe示例 1.2. 页面可配置参数 1.3.设备录像示例 1.4.云端录像示例 1.5.页面示例 2.搭建GB28181视频直播平台 1.时间轴回放 ...
LiveGBS国标GB/T28181流媒体服务查看通道设备录像查看接入设备的前端录像
查看接入设备的前端录像如何查看前端设备录像前端设备录像接口 LiveNVR级联GB28181平台国标平台查看LiveNVR录像查看通道设备录像设备录像时间轴设备录像列表如何查看前端设备 ...
ih5长图如何滑动_iH5中级教程微场景H5必备,滑动时间轴+轨迹.doc
iH5中级教程微场景H5必备,滑动时间轴轨迹 iH5中级教程:微场景H5必备,滑动时间轴+轨迹你是否还在羡慕别人做的H5各种华丽各种切换各种来?使用一个免费的在线H5编辑工具不需要写代码也可以工具 ...
h5滚动时侧滑出现_iH5中级教程：微场景H5必备，滑动时间轴+轨迹
重点控件:滑动时间轴.轨迹知识点: 1. 点击工具栏上的滑动时间轴工具,在舞台上画出一个框作为滑动区域,添加滑动时间轴.选中滑动时间轴,点击图片工具,添加素材.选中素材,点击轨迹工具,添加轨迹,点击 ...
Timeline时间轴
介绍Timeline(时间轴)的使用方法 CSDN的博客添加图片太麻烦了,而且链接网页图片会出现错误,如果需要看详细文章,请访问我的微信公众号<猎梦虚幻研究社> 在蓝图设计图表中右键搜索T ...
SkeyeVSS综合安防监控录像回放控制之自定义可拖动时间轴组件
SkeyeVSS综合安防视频云服务通过接入SkeyeRMS录像服务器实现对系统里的摄像机等设备录像,通过自定义的时间轴组件对录像记录进行加载渲染,播放器回调时间与下面时间轴相互联动,集拖动.点击.缩放 ...

EasyNVR如何实现前端录像时间轴播放？

html css部分：

js部分：

对应接口获取到对应的信息：

EasyNVR如何实现前端录像时间轴播放？相关推荐

最新文章

热门文章