音视频开发

• 音视频时间轴

• 在线剪辑视频，自定义裁剪位置，拖拽时间轴位置

• 视频擦除字幕，自定义拖拽区域，实现可控的擦除位置

• 自定义视频调整大小

• 视频格式转换

相关工具

ffmpeg

FFmpeg是一个开源的多媒体处理工具，它可以通过命令行对音频、视频和图像进行解码、编码、转码、剪辑、合并等操作。它支持各种常见的音视频格式，并且在处理性能和功能上非常强大

• ffmpeg工具可以用于声音处理、压缩、转码、视频格式转换、视频拼接、水印等等

ffmpeg相关库

时间轴库

• 拖拽控制时间轴
• 生成视频画面帧缩略图
• 精准同步视频播放
• 与音频波形或视频帧联动

库名	简介	特性
WaveSurfer.js	音频波形 + 时间轴	支持 marker、拖动、缩放、regions 等
videojs-markers	Video.js marker 插件	时间轴打点、tooltip
ffmpeg.wasm	FFmpeg 的 WebAssembly 版	可用于前端抽帧生成缩略图
Vis-Timeline	可视化时间轴	拖拽、缩放、高度自定义

相关组件实现

• 视频剪辑组件

  • 拖动区域实现视频剪辑

  • video-clip组件

  • 参考：noUiSlider

• 根据视频当前时间点渲染画面帧canvas

  • 支持canvas尺寸改变大小resize

• 视频时间轴规则组件

  • timeline-rule

• 视频画面帧渲染

  • video-frames

• 视频播放器容器组件

  • video-container

• 视频缩略图组件

  • video-thumbnail