# ZingAI.video 在线口播视频剪辑

ZingAI.video 字影 (opens new window)是采用前沿 Web 技术构建的口播视频剪辑工具,欢迎体验

# 背景

我发现自己消费的视频基本都是口播类视频,且 AI 生成的视频绝大多数也是这类视频。

口播类视频并不是指狭义的主播(或数字人)念稿子,它的典型特征是传达的信息以文字语音为主,图像信息为辅的视频
此类视频没有复杂、炫酷、或有艺术感的图像画面,往往是图像之上的文字(大小、色彩、动画)异常的夸张、醒目。

比如:科普、历史、财经、新闻、演讲、儿童故事、技术分享等。

我离职后要做的(技术分享)就是此类视频,有尝试过几款流行产品的口播剪辑功能,不甚满意;
正好我在 B 站开发过类似的产品,就干脆尝试自己做一个。

# 设计理念/指导思想

  • 文字是口播视频的核心信息,所以剪辑应该以文字为中心
  • 文字编辑的学习成本更低,门槛低于传统视频编辑交互
  • 文字相对于图像与音频更加便于检索、与交互
    • 用户阅读文字或文字查找,获取信息的速度更快
    • 基于文字对应的精确时间信息,用户能更快速的与视频进行交互
      • 辅助视频表达的素材(视频、音频、图像)更容易通过文字进行时间对齐
      • 文字能更快速定位到视频特定的位置
  • AI 大模型分析文字的成本更低、速度更快,借助 AI 能大幅提高视频的编辑效率

基于以上我个人总结的信息,设计了 ZingAI.video;
在 UI 设计方面有较多的创新,特别优化了通过文字编辑视频的体验。

这是 ZingAI.video 的 UI 设计

# ZingAI.video 特性

# 文字驱动编辑

创新的交互设计

  • 删除文字即删除对应时间的视频片段,这是口播剪辑工具的核心操作之一
    但 ZingAI 与文字编辑融合得更好
  • 快速关联文字与素材(花字、图片、视频、音乐),不再需要小心翼翼地对齐时间
  • 文字替换用来修改识别错误的字幕,支持批量替换

# AI 智能增强

AI 编辑提效

  • AI 自动高亮字幕中的重点信息,让字幕更醒目
  • AI 根据内容智能插入 emoji,让字幕更动人

# 便捷高效

采用前沿技术精心打造

  • 打开网页就能流畅编辑,无需下载 APP
  • 利用硬件加速导出视频

# 产品规划

ZingAI 是一款编辑工具,但期望用户能以最少量的编辑动作,完成视频制作;
所以还需要继续增强 AI 能力,如:素材制作、字幕校正、智能分段、更丰富的花字效果、模板功能等。

ZingAI.video 字影 (opens new window) 是一个刚发布的产品,还有很多待完善的地方,欢迎体验,也欢迎提出建议。

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

相关文章

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 ...

Google IO 分享 WebCodecs、OPFS 文字版

背景 2024 北京 Google I/O 邀请我参加合作者开发者论坛,主题是 "Build powerful Web App"; 笔者近期在公司项目中实践 WebCodecs,对应的开源项目是 WebAV,在 Web 音视频领域算是相对前沿的探索; 本文主要分享基于 WebCodecs、OPFS 实现的视频剪辑产品,探讨这些 API 还有哪些应用场景; 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 平台进行音视频开发的新手; 这是我第一次进行高频率技术写作,将一 ...