EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
来源:互联网 发布:学校网络下载不了 编辑:程序博客网 时间:2024/05/29 07:38
EasyNVR中有对录像进行检索回放的功能,且先抛开录像的回放,为了更好的用户体验过、让用户方便快捷的找到对应通道对应日期的录像视频,是必须的功能。
基于上述的需求,为前端添加一个日历插件,在日历上展示出所有的录像信息,用来告知用户那些日期有回放录像,那些日期不没有回放录像是很有要的。
如何实现日历插件展示出对应日期信息:
1.需要引入的控件
<script src="@@docroot/adminlte-2.3.6/plugins/moment/moment-with-locales.js"></script><link rel="stylesheet" type="text/css" media="all" href="./adminlte-2.3.6/plugins/daterangepicker/daterangepicker.css" /><script type="text/javascript" src="@@docroot/adminlte-2.3.6/plugins/daterangepicker/moment.js"></script><script type="text/javascript" src="@@docroot/adminlte-2.3.6/plugins/daterangepicker/daterangepicker.js"></script><script type="text/javascript" src="@@docroot/js/jquery.qrcode.min.js"></script><link rel="stylesheet" href="/bootstrap-datepicker-1.7.1/css/bootstrap-datepicker3.css"/><script src="/bootstrap-datepicker-1.7.1/js/bootstrap-datepicker.js"></script><script src="/bootstrap-datepicker-1.7.1/locales/bootstrap-datepicker.zh-CN.min.js"></script>
2.日历控件展示的web触发样式HTML代码
<div class="form-group pull-right"> <div class="input-group input-group-sm"> <input type="text" class="form-control date" placeholder="选择日期"> <div class="input-group-btn"> <button type="button" class="btn btn-sm btn-default" onclick="$(this).closest('.input-group').find('.date').focus()"> <i class="fa fa-calendar"></i> </button> </div> </div> </div>
3.js的格式化
$(".box.videos .date").datepicker({ language : "zh-CN", autoclose : true, format : "yyyy-mm-dd", todayHighlight : false, beforeShowDay : function(data){ var id = $(".box.videos").data("id"); if(!id) return; var gFlags=$(".box.videos").data("gFlags")||{}; var period = data.format("yyyyMM"); if(typeof gFlags[period] == "undefined"){ $.ajax({ async : false, url:"/query_record_monthly", type:"get", data:{ id:"record_"+$.cookie("portNum"), period:period, }, }).then(function(xx){ if(xx.code != 0){ return $.Deferred().reject(); } gFlags[period] = xx.data.flags || "0000000000000000000000000000000"; }).fail(function(){ gFlags[period] = "0000000000000000000000000000000"; }); } var flags = gFlags[period]; var d = data.format("dd"); var flag = flags[d - 1]; if(flag == '0'){ return {classes : "text-gray", tooltip : "没有录像", enabled : false}; } else { return {classes : "text-green text-bold", tooltip : "有录像"}; } } }).datepicker("setDate",new Date()).on('changeDate', function(data){ var period = data.format('yyyymmdd') var id = "record_"+$.cookie("portNum"); $.ajax({ url:"/query_record_daily", type: "get", data: { id: id, period: period, }, success:function(data) { renderVideoPage(data.data.list) } }) });
需要注意的是, beforeShowDay()是处理在插件加载出来之前对日历插件所做的一些样式或其他方面的更改。当我们想要看到日历展示出对应日期得信息的时候,必须在日历加载出来以前对他进行操作。由于获取日历上展示的信息都是实时的通过请求接口获得的,因此,我们需要在通过Ajax请求接口的过程中就要使用同步请求,只有我们实时获得到的数据才有必要在日历上相应的显示出来。
关于EasyNVR
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;
详细说明:http://www.easydarwin.org/easynvr/
获取更多信息
邮件:support@easydarwin.org
WEB:www.EasyDarwin.org
Copyright © EasyDarwin.org 2012-2017
- EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
- EasyNVR RTSP转RTMP/HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:通过接口获取实时信息
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:通过接口获取实时信息
- EasyNVR RTSP转RTMP/HLS流媒体服务器前端构建之:内部搜索功能的实现
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:关于接口调用常见的一些问题(401 Unauthorized)
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之_关于接口调用常见的一些问题(401 Unauthorized)
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息
- EasyNVR H5无插件直播方案前端构建之:实时直播的四分屏的前端展示
- rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试:ie下的 pointer-events: none
- rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试:ie下的 pointer-events- none
- EasyNVR H5无插件直播方案前端构建之:如何播放HLS
- EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放
- EasyNVR无插件流媒体服务器前端技术防止重复提交的方法
- LeetCode算法题——Roman to Integer
- 文件系统---代码层次深入分析文件系统
- C#中数组作为参数传递的问题
- oracle中同义词(私有,公有),分区表(范围,间隔)
- Coursera吴恩达《神经网络与深度学习》课程笔记(4)-- 浅层神经网络
- EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
- Spark之 shuffle 操作详解
- 深入了解 gRPC:协议
- VNC 黑屏
- 极验(geetest)滑动验证码研究
- UE破解版安装
- 设计模式
- 第35节 HtmlTestRunner测试报告
- hadoop收集