仓库拉起代码：git@github.com:pickedDeng/videoEdit.git

npm install

npm run serve

运行v1.0版本
cd video-edit-v1.0
npm install 
npm run serve

• 视频分段剪辑，打入打出点；

• canvas刻度尺 调整不同时间刻度,并适配剪辑的短视频宽度

• 支持对每段剪辑视频的编辑，拖拽，改变宽度以及左侧距离

• 双击刻度尺调整当前时间位置

• 支持对某一段视频进行删除修改标题

• 支持对拆条视频左右微调

• 反选当前剪切的视频片段

• 自动拆分视频，平均拆分视频

• 支持视频 上一帧，下一帧

• 内置部分快捷供快捷使用 具体参照例子

• 支持多轨道（视频轨道、音频轨道、字幕轨道、图片轨道）
• 支持多类型拖拽形成轨道
• 支持轨道拖拽、移动、改变大小
• 支持改变轨道刻度基准
• 支持改变轨道自适应现轨道长度
• 多种刻度的刻度尺

  界面简介

  

  刻度尺可以说是比较复杂的一环了，因为包含 5种 尺度的变化，同时对应着后续音视频轨道、图片轨道等内容的长短，稍有偏差则会影响成品效果。

  实现方式

  本示例采用传统盒子布局，其实刻度尺这种多容器，精度要求高的界面使用传统方式渲染必然存在性能问题。熟练canvas的可使用canvas制作来优化，本例中未使用canvas是作者canvas不精通（精力有限无法深入学习canvas高级用法，要学的还有很多，新手可参考视频拆条项目中的刻度尺为canvas制作）

  动态刻度的实现方式

  本例中包含element-ui中的基本刻度及其时长对照表
  1s ——— 0
  10s ——— 25
  60s ——— 50
  300s ———75
  600s ———100

  采用工具(tools)转换秒数与HH:MM:SS格式的显示转化;(使用使用第三方moment便捷转换)

  // 使用工具  将总秒数转化为hh:mm:ss格式
  const moment = require("moment");
  // 参数  总时长(s),刻度尺区间(number)  
  function getItemTimezoneValue(totalSecond, currentItemTimezone) {
      if (totalSecond) {
          const handleTime = moment.duration(totalSecond * currentItemTimezone, "seconds");
          const hh = handleTime.get('hours') > 9 ? handleTime.get('hours') : `0${handleTime.get('hours')}`
          const mm = handleTime.get('minutes') > 9 ? handleTime.get('minutes') : `0${handleTime.get('minutes')}`
          const ss = handleTime.get('seconds') > 9 ? handleTime.get('seconds') : `0${handleTime.get('seconds')}`;
          return `${hh}:${mm}:${ss}`
      } else {
          return 0
      }
  
  }
  
  module.exports = { getItemTimezoneValue }
  

  在通过filter过滤器进一步转化成想要的数据

  filters_ItemTimezone(val, currentItemTimezone) {
        return getItemTimezoneValue(val, currentItemTimezone);
  }
  奇技淫巧？

  多采用CSS样式完成刻度布局，其中普通的flex布局+space-around的对对齐方式，长刻度线采用nth-child选中；参考代码如下

  :nth-child(5n + 1) {
            height: 10px;
  }
  :nth-child(10n + 1) {
            height: 15px;
  }
  :nth-child(10) {
            height: 5px;
  }