SkeyeVSS综合安防视频云服务通过接入SkeyeRMS录像服务器实现对系统里的摄像机等设备录像，通过自定义的时间轴组件对录像记录进行加载渲染,播放器回调时间与下面时间轴相互联动，集拖动、点击、缩放、无限加载等于一体的时间轴组件。
通过接口获取录像回放记录的列表，数据结构中包含每段录像的开始与结束时间，把每段记录绘制到时间轴上，左右拖动会自动触发日期的改变回调，再通过接口去获取对应日期的数据，方便我们整体查看，点击有录像的时间段区域或拖动指针（三角形）返回当前时间戳，再配合拉流进行播放，通过滚轮缩放最小精确到秒，最终效果如图所示：
时间轴组件基本功能 时间轴初始化代码及录像时间段的数据格式，如下：
<div class="timeline-group" id="timeline"></div>let times = [{begin: new Date(new Date('-04-14 11:30:00')).getTime(),end: new Date(new Date('-04-14 17:00:00')).getTime()},{begin: new Date(new Date('-04-14 17:01:00')).getTime(),end: new Date(new Date('-04-14 19:00:00')).getTime()}]let TimeAxis = new TimeLine({dom: document.getElementById('timeline'),bg: '#000',date: new Date(new Date('-04-14').toLocaleDateString()).getTime(),cellStyle: {background: 'rgba(24,208,217,0.5)'},timecell: [...times],callback: (data) => {// {mode: 触发方式 timestamp: 时间戳 valid: 是否有效}console.log(data)this.$emit('changeTime', data)}})
1、时间轴组件是使用canvas技术绘制，组件的宽高是自动根据外层div的宽高来自适应，通过设置外层div的宽高来控制即可。
创建canvas注册事件初始化边框渲染时间轴初始化刻度线渲染播放指针有效时间区域填充时间段this.canvas.addEventListener('contextmenu', (e) => {e.preventDefault();});this.canvas.addEventListener('mousemove', this.canvasMousemoveFunc.bind(this));// 滚轮事件this.canvas.addEventListener('mousewheel', this.mousewheelFunc.bind(this));this.canvas.addEventListener('mousedown', this.mousedownFunc.bind(this));this.canvas.addEventListener('mouseup', this.mouseupFunc.bind(this));this.canvas.addEventListener('mouseout', this.mouseoutFunc.bind(this));this.canvas.addEventListener('click', this.clickFunc.bind(this));
2、设置时间段默认填充色, 背景填充色, 时间段还可设置不同的填充色，来区分不同的时间段,在数据结构中添加 style字段参数即可，如果在数据结构中添加了style字段，则优先使用style，没有style参数时再使用cellStyle参数，如果cellStyle参数不存在，则使用内置的默认填充色，如下图：
let times = [{begin: new Date(new Date('-04-14 11:30:00')).getTime(),end: new Date(new Date('-04-14 17:00:00')).getTime(),style: {background: 'rgba(172,17,189,0.5)'}}]cellStyle: {background: 'rgba(24,208,217,0.5)'},bg: '#000',
3、左右拖动，拖动时间轴时组件会自动监听日期的变化，实现无限加载每天的录像回放记录，将记录的时间段渲染到时间轴上，滚轮缩放 ，通过绑定滚轮事件来控制时间轴的放大与缩小,
this.canvas.addEventListener('mousewheel', this.mousewheelFunc.bind(this));mousewheelFunc(event) {if (event && event.preventDefault) {event.preventDefault()} else {window.event.returnValue = false;return false;}let e = window.event || event;let delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));let posX = this.getCursorPositionX(e);let middle_time = this.date + posX * (this.zoomHours * 3600 * 1000) / (this.canvasWidth); //ms 记住当前中间的时间if (delta < 0) {this.zoomHours = this.zoomHours - delta;if (this.zoomHours >= 24) {this.zoomHours = 24;//放大最大24小时}} else if (delta > 0) {// 放大this.zoomHours = this.zoomHours - delta;if (this.zoomHours <= 1) {this.zoomHours = 1;//缩小最小1小时}}this.clearCanvas();this.date = middle_time - posX * (this.zoomHours * 3600 * 1000) / (this.canvasWidth);this.initCanvasCtx()}
4、配合SkeyeWebPlayer网页播放器，实现回放，在播放器callbackFunc回调中获取到当前播放的时间，通过TimeAxis.updateTime(时间戳)方法更新时间轴上面的播放指针位置，达到联动效果。
5、时间轴上单击右键 和 拖动指针结束后都会返回当前位置 获取当前点击位置 计算出时间戳，通过callback返回，拿到时间可生成播放地址或拉取播放信息，传到播放器中播放，在返回的参数中已经判断好当前时间是否为有效时间。mode判断是点击或拖动，valid判断时间是否在有效区域 如图：
获取更多信息
邮件：support@
QQ交流群：102644504
SkeyeVSS综合安防互联网无插件播放解决方案
SkeyeARS全景AR增强监视系统解决方案
SkeyeIVMS集群式视频云管控平台解决方案
