# 创新视频剪辑交互:二维时间轴 + 文字轨

以下是视频文字稿,观看视频请移步 B 站 (opens new window)

立即体验 Dimcut (opens new window)

Dimcut 产品预览

# 传统剪辑的痛点

今天分享一款视频剪辑工具——DimCut

日常剪辑中,录制完成后需要反复回看视频,依据画面和声音逐段删除废片、添加素材、对齐时间戳。在剪映等工具中,这一过程对应的是频繁拖拽横向滚动条定位片段、反复点击暂停按钮确认时间点,操作效率较低。

# 两个核心创新

DimCut 通过两项交互设计来解决上述问题。

界面预览

# 二维时间轴

将传统的一维时间轴折叠为二维布局。一行对应一个时间段,所有内容一目了然,无需横向滚动,改用垂直滚动浏览——体验接近阅读长文。

# 文字轨

将 ASR 识别出的文字直接整合进时间轨道。用户通过阅读文字即可快速定位时间点、选中片段,无需反复播放视频确认内容。

# 功能演示

# 删除片段

轨道中同时展示音频波形图和视频画面帧。若开头有前奏需要去除,选中该区域后点击删除,导出时自动从有效内容起始。
对于单句内容(如"海上明月共潮生"),可通过文字直接选中该片段并删除,导出结果自动跳过。

# 提取有效片段

当视频大部分内容不需要,只希望保留若干片段时,可使用「提取」模式:

  1. 选中目标片段
  2. 点击加号添加到提取列表
  3. 继续选择更多片段
  4. 导出时仅包含选中的片段

适合从长视频中摘录有价值的内容,或提取片段后做二次编辑。

# 调整片段顺序

多个片段选中后,支持拖拽调整顺序,导出的视频按调整后的排列生成。

# 添加音效素材

素材管理中支持额外的音效轨道,可将音效拖拽到指定位置(如为视频开头添加提示音),增强表现力。

# 素材与 ASR 配置

素材管理提供两类配置:

  • 主轨素材:视频或音频文件,可随时替换;播客场景直接使用音频
  • ASR 语音识别:调用第三方服务(如 Whisper)从音频中提取文字

DimCut 的核心优势在于以文字驱动视频剪辑,区别于传统工具依赖画面和声音的定位方式。阅读文字的效率远高于反复回放视频——点击文字即可跳转到对应时间点和片段。

文字轨和媒体轨均可独立隐藏:不需要文字时可隐藏文字轨保持简洁;以文字为主的播客场景可隐藏媒体轨,纯文字操作。时间轴支持从全局概览到帧级别(一行约一秒)的自由缩放。

# 总结

DimCut 的三大特征:

  • 二维时间轴:一眼看到更多信息,避免横向滚动
  • 文字整合进时间轨道:更快地定位时间点、选中片段,进行剪辑操作
  • 极简 UI 设计:直接在网页中剪辑视频

如有建议或反馈,欢迎在 GitHub 上交流。

# 相关链接

💗 博主正处于裸辞待业状态,欢迎 商务合作 💗

相关文章

ZingAI.video 在线口播视频剪辑

ZingAI.video 字影是采用前沿 Web 技术构建的口播视频剪辑工具,欢迎体验 背景 我发现自己消费的视频基本都是口播类视频,且 AI 生成的视频绝大多数也是这类视频。 口播类视频并不是指狭义的主播(或数字人)念稿子,它的典型特征是传达的信息以文字语音为主,图像信息为辅的视频; ...

视频编辑,如何选择技术方案

以下是视频文字稿,观看视频请移步 B 站、抖音 开场 大家好! 我是风痕, 开源项目 WebAV(音视频编辑 SDK )的作者, 在我的博客有许多 Web 音视频入门的技术文章。 随着 AI 视频技 ...

WebAV SDK(Web 视频编辑)V1 发布

前言 WebAV 是基于 WebCodecs 构建的 SDK,用于在 Web 平台上创建/编辑视频文件。 V1 对项目来说是里程碑版本,意味着 API 已经稳定,且功能的稳定性也经过了长时间的考验,可用于生产环境。 我在 20 年加入 B 站,开始接触 Web 音视频相关的知识(Web 播放器), WebCodecs API 在 21 年发布; 我预期 WebCode ...

纯 Web 视频剪辑

ZingAI.video 字影是采用纯 Web 技术实现剪辑功能的产品,欢迎体验 前言 WebCodecs API 为 Web 平台提供了音视频编解码能力,使得在 Web 平台(网页、Electron)上实现高效、专业的视频剪辑成品成为可能。 读者可阅读笔者的入门系列文章获取更详细的信息,或直接使用 [W ...

WebCodecs 性能表现及优化思路

ZingAI.video 字影是采用 WebCodecs 构建的视频剪辑工具,可在这里体验视频导出的性能 笔者开源 WebAV 已经一年半,还写了系列文章帮助初学者入门 Web 音视频。 之前一直隐隐担心在 Web 平台处理音视频与 Native APP 会有明显性能差距,因 ...

WebCodecs 编码字符串(codec)介绍

笔者的 Web 音视频系列文章 视频播放经常会看到这样的字符串 video/mp4; codecs="avc1.4d002a",WebCodecs 编解码器初始化也需要配置 codec 参数,本文尝试简单介绍编码字符串含义。 视频编码分许多种类,每个种类还分多个版本,不同种类、版本对应的编解码算法、支持的能力(分辨率上限、色深等等)不同 ...

WebCodecs 开启 Web 音视频新篇章

你可以先略过下面的无聊文字,体验一番 WebCodecs 的实力 WebCodecs 是什么 WebCodecs 是一个 Web 规范,21 年 9 月份在 Chrome 94 中实现 WebCodecs 提供访问编解码能力的接口,可精细控制音视频数据 Web 音视频 API 存在什么问题 音视频技术在 Web 平台上的应用非常广泛,已有许多 Web ...

【译】WebCodecs 说明

本文翻译至 WebCodecs Explainer 问题与动机 已有许多 Web API 在内部使用媒体编解码器来支持特定用途,比如: HTMLMediaElement and Media Source Extensions WebAudio (decodeAudioData) MediaRecorder WebRTC 但是还没有一种通用的方式来灵活 ...

Web 音视频(六)图像素材处理

Web 音视频目录 前序章节介绍了如何在浏览器中解析、创建视频,以及给视频添加一些自定义素材(图片、音频、文字...); 本章介绍如何给图像素材加特效、加动画,实现转场、移动水印、图像滤镜美化等功能。 你可以跳过原理介绍,直接查看 WebAV 示例 素材动画 在视频制作中实现动画跟其他场景略有不同,因为视频 ...

Web 音视频(七)中期回顾

Web 音视频目录 个人回顾 本系列更新至今,持续了一个月时间,内容可以总结为音频、视频数据的 解析 - 处理 - 合成,在浏览器中比较粗粒度地实现音视频编辑的主要环节,差不多是把 WebAV 项目的原理讲完了。 讲解的知识非常浅,目标读者是准备在 Web 平台进行音视频开发的新手; 这是我第一次进行高频率技术写作,将一 ...