开源视频回放时间轴组件（video-time-slider）：肝了半月终于头发能保住啦

大家好，我是六六。花了半个月开发时间，这个录像回放项目终于进入了尾声。今天就把自己开发的成果视频时间轴组件给开源分享出来，本篇主要以功能介绍，组件使用，下图为项目成果。讲解主要以demo为主了。

github地址：https://github.com/6sy/timeSlider

1.组件介绍

说明：

video-time-slider是一个基于原生js打造的视频回放时间轴组件，本组件适用于任何框架。

第一版本主要功能：

• 支持时间轴精度调整，放大缩小，有六种精度大小：10s,1min,5min,10min,30min,1h
• 支持时间线滚动和跳动
• 支持以时间线为中心进行缩放时间轴
• 支持不同类型的时间段
• 支持时间轴的点击和拖动

安装：

npm install video-time-slider --save

使用：

const timeSliderInstance = initTimeSlider(el,config)

React Hook中使用：

import {useEffect} from 'react';
import initTimeSlider from 'video-time-slider';
function App() {
  useEffect(()=>{
    initTimeSlider('#timeSlider',{
      curDaytimeChunkArray:['012200-023000-C','002200-003000-B','001200-002000-A','000000-001000-A'], // 时间段
      presentSeconds:20,// 当天开始播放秒数
      timeChunkType:{ // 时间段类型
        A:'red',
        B:'yellow',
        C:'blue'
      },
      speed:1, // 速度
      isInitialPlay:true, // 是否初始化后进行播放
     })
  })
  return (
    <>
     <div id='timeSlider'></div>
    </>
  );
}
export default App;

Vue3中使用：

<script setup lang="ts">
import initTimeSlider from 'video-time-slider';
import { nextTick } from 'vue';
nextTick(()=>{
  initTimeSlider('#timeSlider',{
      curDaytimeChunkArray:['012200-023000-C','002200-003000-B','001200-002000-A','000000-001000-A'],
      presentSeconds:20,
      timeChunkType:{
        A:'red',
        B:'yellow',
        C:'blue'
      },
      speed:1,
      isInitialPlay:true,
  })
})
</script>
<template>
   <div id='timeSlider'></div>
</template>

script引用：

<script src="../dist/main.js"></script>
<script>
initTimeSlider('#timeSlider',{
  curDaytimeChunkArray:['012200-023000-C','002200-003000-B','001200-002000-A','000000-001000-A'],
  presentSeconds:20,
  timeChunkType:{
    A:'red',
    B:'yellow',
    C:'blue'
  },
  speed:1,
  isInitialPlay:true,
 })
</script>

config配置说明：

参数	描述	类型	可选值	默认值
curDaytimeChunkArray	当天的时间块,每一项格式为startTime-endTime-type	Array	必填	--
presentSeconds	开始播放时间,这个时间为秒数，而且必须在curDaytimeChunkArray时间段内	number	必填	--
timeChunkType	时间段类型,属性名为类型与curDaytimeChunkArray对应，属性值为渲染到时间轴上的颜色	object	必填	--
speed	时间线滚动的速率	number	--	1
isInitialPlay	是否初始化后进行播放,如果设置为false,可以调用实例的timeLinePlay进行播放	boolean	--	false

实例方法:

timeLinePlay：开始播放

timeLineStop：停止播放

setTimeLineLeft

此函数为设置时间线的位置，在实际开发中。我们都会通过此函数去设置时间线的位置。在调用之前，我们还需要设置时间线要滚动的时间，再调用。

instance.presentSeconds = 30 // 30代表下次时间线移动的位置为 00:00:30
instance.setTimeLineLeft()   // 设置时间线的位置

2.功能讲解

首先，我们把时间轴这个模块分为三大部分，时间轴，时间线，以及时间块。

2.1 时间轴

主要功能：精度展示，时间轴缩放，拖拽和点击时间轴 介绍：在第一个版本中，共有6种精度，分别为10s,1min,5min,10min,30min,1h.这一块在第一版本中不支持扩建。我们鼠标移动到时间轴上，进行滚轴的滑动就可以进行精度的一个切换了。这里有一个问题就是，在我们放大和缩小时，肯定要有一个中心点吧，这个地方我们放大时间线那一块进行讲解。还有一个边界问题我们需要注意，时间轴的left不要大于0和时间轴的right不要大于0就好了。

时间轴缩放：

时间轴点击和拖拽：

在事件处理这一块，我们首先要知道如何去区分点击和拖拽。我这里其实就是通过mousedown和mouseup两个事件做的。记录mousedown和mouseup的时间，当两者相差小于300ms，则判断为点击，反之为拖拽。点击事件时，时间轴不动，时间线进行跳转，拖拽事件时，时间线不动，时间轴滚动。

2.2 时间块

主要功能：时间块的展示，以及根据所选类型展示时间块。 介绍：一个时间块的数据例如为000010-000020-A。意思就表示从当天的0时0分10秒开始到0时0分20秒类型为A的视频类型。那么渲染到时间轴上其实也很简单，只要计算出它的时长，再根据当前的精度大小进行渲染就好了。

2.3时间线（核心）

主要功能：时间线的移动，时间线的跳动，以时间线为中心进行时间轴的缩放。

时间线的移动

介绍：在demo中，我们是利用定时器进行时间线的移动。根据传入的速率来决定每秒走几秒的距离。那么时间线的位置怎么计算呢？是根据当前时间，计算出当前时间的秒数除以24小时，得到的比例再乘以时间轴的长度就是时间线的位置了。在真实的项目中，时间线的滚动肯定不会用定时器，一般会根据帧数据解码成功后的这个时间，这个时间后端会有一个标识，我们根据这个标识进行时间线的移动。这个组件实例中就有一个方法来设置时间线的位置,只要我们计算出正确的秒数，就可以直接调用了。

/**
   * 设置时间线的位置
   */
   setTimeLineLeft () {
    let left = (this.presentSeconds) * (this.allAxisLength / this.DAYSECONDS)
    left =(left +this.domLeftToNumberUtils(this.containerDom))
    this.timeLineDom.style.left = this.PADDINGLEFT+left + 'px'
  }

时间线的跳动

介绍：为什么时间线要进行跳动？例如现在我们的录像有两个时间段000020-000030-A和000005-000010-A,那么就很明显，当10s时间播放完成后，我们就需要跳到20s的时间块上了。所以还有一个很重要的参数就是一个当前时间线所在的时间块的索引index。我们知道当前索引后就可以知道怎么找到下一段时间块。当然了，传入时间块的时候要按顺序传入。那么我们在点击时间轴和拖动完成后，也要计算当前时间所在时间块的索引。所以，只要时间线的时间动了，我们都要计算当前时间是否超出时间块了。

以时间线为中心进行时间轴的缩放

介绍：我们进行时间轴缩放的时候，需要一个中心点，中心就为时间线所在的位置。其实计算方法也比较简单，得到新旧时间轴的比例，计算得到新时间轴里时间线的位置，再减去时间轴left长度就好了。有兴趣的可以去代码里看看zoomSetTimeSlider这个方法。

结尾

喜欢的小伙伴可以点赞收藏一下哈，大家可以到github跑一跑demo案例。在使用过程中有不懂的可以随时问我哈。对视频录像这一块技术有兴趣的也欢迎大家和我一起交流。