朋友们晚上好啊，这段时间我在忙着完成最新【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net的开源项目WebCut。这个项目是我这小半年来唯一的开源新项目【未经授权禁止转载】未经授权，禁止复制转载。，这对比我过去几年的一些开源事迹来说，真未经授权，禁止复制转载。【转载请注明来源】的是一段低产荒。不过这是正常的，没有任何【作者：唐霜】【原创内容，转载请注明出处】人可以长时间的一直发布新项目，这种沉寂，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。正是因为我把时间和精力都投入在其他事情上【本文受版权保护】本文版权归作者所有，未经授权不得转载。，所以其实是好事。之所以要发起和开源这个转载请注明出处：www.tangshuang.net原创内容，盗版必究。项目，说起来还是有些背景，下面我会来聊一【原创内容，转载请注明出处】【作者：唐霜】聊关于这个项目的一些背景，以及过程中在技【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。术上的一些探索。
没有合适的视频编辑UI框架ὢ原创内容，盗版必究。【转载请注明来源】d;
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net过去半年，我连续发布了多款与视频相关的产【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net品，这些产品或多或少都需要用户参与视频编【本文受版权保护】【本文首发于唐霜的博客】辑操作，比如给视频添加字幕、对视频进行裁【原创不易，请尊重版权】【原创不易，请尊重版权】剪、给视频配音等等，这些在视频编辑器中常【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】见的视频处理工具，在Web端其实需求非常【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】巨大，特别是现在AI领域，制作各种个样的转载请注明出处：www.tangshuang.net【版权所有，侵权必究】视频的需求非常多。而这些需求，可能并不需【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】要在产品中载入一整个视频编辑器，而是只需未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。要几个简单的部件来实现编辑功能。然而回望【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】开源市场，能够支持这种编辑能力的项目少之【原创内容，转载请注明出处】【转载请注明来源】又少，虽然有一些项目呈现了视频编辑的能力【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】，然而，要么项目太大，一个完整的视频编辑【本文受版权保护】转载请注明出处：www.tangshuang.net器甩在开发者脸上，要么过于底层，没有UI【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。界面。如果我只是想有一个视频预览，再有轨【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】道和几个配置界面，就没法直接用这些项目。【本文首发于唐霜的博客】【本文首发于唐霜的博客】包括我自己在内，每次有与视频相关的功能，转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。都要把之前在另外一个产品中实现的编辑能力本文版权归作者所有，未经授权不得转载。【本文受版权保护】移植到新产品中，而且要调的细节也很多。正【转载请注明来源】【本文受版权保护】是这种求而不得的现状，促使我打算自己写一【原创不易，请尊重版权】【转载请注明来源】个视频编辑器项目。
【未经授权禁止转载】【原创内容，转载请注明出处】【原创内容，转载请注明出处】初始想法💡：拼积木著作权归作者所有，禁止商业用途转载。
【未经授权禁止转载】【版权所有，侵权必究】【未经授权禁止转载】【版权所有，侵权必究】我可不是从0开始的，因为我已经开发过很多【本文首发于唐霜的博客】【原创不易，请尊重版权】次视频编辑相关的功能了。我还在Videa项目【转载请注明来源】中完整实现了一个视频编辑器。因此，我的想【作者：唐霜】【原创内容，转载请注明出处】法是把我之前做过的功能，整理一遍，就可以著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】得到想要的组件或逻辑。有了这个工具包之后原创内容，盗版必究。【原创内容，转载请注明出处】，我只需要在将来的新产品中复用这些代码即本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】可。于是我建立了一个独立的npm包，来把【未经授权禁止转载】【版权所有，侵权必究】所有功能集中放在一起。随着持续的迭代，我著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。发现其实这里面是有规律的。
【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net视频编辑器我们都用过，像剪映一样，有各种【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。功能，细节也很多。但是，当我们把视频编辑本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。的功能放到某个具体的产品中时，我们是不可【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】能直接把整个编辑器给用户的。实际上，我们【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net最终呈现的产品形态，基本上都是剪映的子集【关注微信公众号：wwwtangshuangnet】【本文受版权保护】，而且是很小很小的子集，可能只是整个剪映未经授权，禁止复制转载。【版权所有，侵权必究】1%的功能，最终给到用户操作可能只是非常【关注微信公众号：wwwtangshuangnet】【本文受版权保护】简单的一次性操作，而页面也很轻量，属于用【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。户即用即走，用完就关再也不会来第二次的那本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。种。正是这种看似功能点很小，但实际上需要转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。为它单独定制，技术上的成本可以用巨大来描本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】述的场景，让我觉得这是一个需要认真对待的【转载请注明来源】【版权所有，侵权必究】点。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文受版权保护】【转载请注明来源】我的计划是采用组件化的思想，把一个视频编【原创内容，转载请注明出处】【本文受版权保护】辑器拆成一个一个的组件，把一个完整的剪映转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】编辑器，拆成一个按钮一个按钮的积木。当我【作者：唐霜】原创内容，盗版必究。们面对产品需求时，就从这些积木中挑选，然【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】后组合成产品经理所描述的功能，同时，具体【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。这些积木怎么布局，则根据设计稿调整位置，【转载请注明来源】【未经授权禁止转载】还可以用CSS来覆盖组件内部的样式，达到【转载请注明来源】原创内容，盗版必究。与设计稿媲美的效果。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。
上面是我用AI做的一张示意图，大概就是这【版权所有，侵权必究】【原创不易，请尊重版权】个意思，把一个编辑器拆的细碎，然后要什么本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】功能就把对应的组件拿来拼凑一下。比如要对【未经授权禁止转载】【版权所有，侵权必究】视频进行静音裁剪，就只要把预览区和轨道区本文版权归作者所有，未经授权不得转载。【作者：唐霜】拿出来，然后自己再增加一些能力上去。这样原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。，开发者在面对各种各样的需求时，就能快速【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】搭建起界面效果，而不需要从头实现界面和视转载请注明出处：www.tangshuang.net【未经授权禁止转载】频处理能力。
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【版权所有，侵权必究】【原创不易，请尊重版权】
通过不同的组合方式，配合开发者自己的布局【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。，就可以创建符合需求的视频编辑界面。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】没那么容易😥：外简内繁的【转载请注明来源】【未经授权禁止转载】接口艺术
原创内容，盗版必究。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net虽然想法很容易有，但是要做成成品，并且发未经授权，禁止复制转载。【本文受版权保护】布为可用的库可没那么轻松。要知道视频编辑【作者：唐霜】转载请注明出处：www.tangshuang.net器的功能非常多，多到我们无法用简单的文字转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】描述它们。那么，如何才能站在开发者的角度【原创不易，请尊重版权】【原创不易，请尊重版权】，让这件事变得简单呢？
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。开发库永远面临着一个矛盾：灵活性和规范性【原创内容，转载请注明出处】【未经授权禁止转载】之间的矛盾。灵活性就是暴露又多又细的接口未经授权，禁止复制转载。【作者：唐霜】，让开发者可以用不同参数，玩出花活，例如转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】知名项目echarts早期就是这种。这种本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。对于刚上手的开发者而言，无言是一场灾难，转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。他们甚至不知道从哪里开始，但是一旦完全掌【转载请注明来源】本文作者：唐霜，转载请注明出处。握，就相当于拥有了一个武器库，可以为所欲本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】为。而规范性则是强制性规则比较多，只能暴原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】露少量接口，避免开发者破坏这种规范，例如本文作者：唐霜，转载请注明出处。【本文受版权保护】很多前端UI组件库就是这样。这两者之间的【未经授权禁止转载】【本文受版权保护】矛盾，是每一个库或框架开发者最难平衡的。
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】在视频编辑器上，我认为有些东西是固定的，本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net几乎每一个需求都会用到，例如视频预览播放著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】器、控制按钮等，但是有些功能是低频功能，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。例如媒体库、字幕编辑等。因此，对于高频和【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net低频的功能，我用两种态度去处理。
本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net高频的功能，拆的很细，拆到一个按钮为止，转载请注明出处：www.tangshuang.net【作者：唐霜】例如视频播放器，看上去已经很单一了，但是原创内容，盗版必究。未经授权，禁止复制转载。，我还要把预览屏幕和播放按钮拆开，屏幕和【作者：唐霜】原创内容，盗版必究。按钮如何布局就可以随意去处理。类似的还有本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net导出按钮、分割片段按钮等等。把这些工具拆【原创内容，转载请注明出处】原创内容，盗版必究。分为一个一个最小的单元，由开发者自由布局著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，这样就可以很好的去适配产品需求。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】对于低频功能，则直接导出为大组件，这样就【未经授权禁止转载】【转载请注明来源】可以在一个组件内完成复杂的逻辑，减少开发【本文首发于唐霜的博客】【原创不易，请尊重版权】这些组件时需要跨组件控制状态的心智成本。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net比如媒体库，里面包含了媒体的管理、上传、【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。本地化等等，这些逻辑还是很复杂的，如果还【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。是按照细拆思路，那么实现起来就烦得要死。【本文受版权保护】著作权归作者所有，禁止商业用途转载。因此，这类工具我都是只暴露为一个大的组件转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【本文受版权保护】【版权所有，侵权必究】同时，为了方便开发者在某些情况下快捷接入【转载请注明来源】【原创不易，请尊重版权】，我会设计一些自己看到的不错的编辑器UI【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。，然后用上诉的工具把它们搭出来，这样，开著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】发者如果在产品需求中发现仓库里已经有功能【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】一致的组件，就不需要自己去组合，直接使用【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。对应组件即可。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文受版权保护】以模仿剪映为例，开发者只需要接入【转载请注明来源】WebCutEditor这个组件即可：本文版权归作者所有，未经授权不得转载。
<script setup>
import { WebCutEditor } from 'webcut';
import 'webcut/esm/style.css';
</script>
<template>
<WebCutEditor />
</template>
这样就可以得到一个界面接近于剪映的视频编著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】辑器。
本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。数据驱动，视频编辑的DSL本文版权归作者所有，未经授权不得转载。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。经过我的研究，发现对于单纯的视频编辑而言【版权所有，侵权必究】【本文首发于唐霜的博客】，编辑器其实只需要两份数据，就可以解决大【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】部分场景下的需求。一份是编辑的素材数据，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net一份是视频的配置数据。
【未经授权禁止转载】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。素材数据原创内容，盗版必究。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。它包含素材文件本身的信息、素材的组织信息【版权所有，侵权必究】未经授权，禁止复制转载。、素材的属性信息。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【作者：唐霜】转载请注明出处：www.tangshuang.net文件信息原创内容，盗版必究。
【本文受版权保护】【原创不易，请尊重版权】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】我通过opfs将文件存在本地，并且在in【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】dexedDB中存储每一个文件的关联信息著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。。包含文件的类型、名称、大小等。在一个域未经授权，禁止复制转载。原创内容，盗版必究。名下，每一个文件的实体（也就是File对原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】象）只需要一份，通过file-md5值作【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】为索引存在opfs中。而一个文件可能会在【作者：唐霜】原创内容，盗版必究。多处被使用，indexedDB中则是记录【本文首发于唐霜的博客】原创内容，盗版必究。这些信息，多个关联信息可同时链接到同一个原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netFile。另外，基于indexedDB的著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net特性，还可以实现筛选等能力。
未经授权，禁止复制转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。素材组织信息【关注微信公众号：wwwtangshuangnet】
【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】原创内容，盗版必究。主要是指当把素材放在视频时间轨道中时，所【本文受版权保护】著作权归作者所有，禁止商业用途转载。需要的数据结构。包含轨道列表、素材所对应【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】的文件、素材对应时间点、播放时的一些属性【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net等等信息。这些信息综合起来，我们就知道，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。在视频的某一个时刻，应该播放什么内容。
【本文首发于唐霜的博客】【转载请注明来源】转载请注明出处：www.tangshuang.net素材属性信息本文作者：唐霜，转载请注明出处。
【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【转载请注明来源】在播放中，素材以什么方式呈现，如文本的样未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。式、视频音频的播放速度、动画、转场等。
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】配置数据本文作者：唐霜，转载请注明出处。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。主要指视频本身的信息，在导出时这些配置可著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。以直接体现出来，例如视频的分辨率、比例、【关注微信公众号：wwwtangshuangnet】【作者：唐霜】速率等，视频是否要添加某些特殊的内容，例【转载请注明来源】【原创内容，转载请注明出处】如水印等。
未经授权，禁止复制转载。【原创内容，转载请注明出处】【版权所有，侵权必究】基于素材数据和配置数据，我们基本上可以完【版权所有】唐霜 www.tangshuang.net【转载请注明来源】整的知道当前这个视频的编辑状态。通过数据本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。来恢复当前的编辑状态，变得可行，这可以抵【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。消用户在浏览器中经常执行“刷新”操作带来【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】的状态丢失。同时，这份数据也可以备份到云【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。端，实现多端的同步（不过需要同时同步Fi【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】le，速度肯定会受影响）。而且由于数据本【版权所有，侵权必究】【原创内容，转载请注明出处】身是纯序列化的，因此，可以交给AI来进行转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。处理，例如让AI调整一些时间、样式等可基著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net于纯序列化数据完成的功能。这就让我们的编本文版权归作者所有，未经授权不得转载。【作者：唐霜】辑器变得有更多的玩法。
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【原创不易，请尊重版权】发布上线🌏本文版权归作者所有，未经授权不得转载。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】原创内容，盗版必究。经过几天的工作，我终于把代码整理完整，经著作权归作者所有，禁止商业用途转载。【作者：唐霜】过调试之后，基本可用了，便迫不及待的准备本文版权归作者所有，未经授权不得转载。【转载请注明来源】与大家分享。现在，你可以使用这个项目了。
本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】未经授权，禁止复制转载。 【作者：唐霜】【本文受版权保护】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】由于底层是由Vue3作为驱动的，因此，在【版权所有，侵权必究】未经授权，禁止复制转载。Vue中使用有非常大的优势，具体如下：
【转载请注明来源】【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。npm i webcut
先安装，安装之后，你就可以在Vue中如下转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net使用。
未经授权，禁止复制转载。【转载请注明来源】原创内容，盗版必究。<script setup>
import { WebCutEditor } from 'webcut';
import 'webcut/esm/style.css';
</script>
<template>
<WebCutEditor />
</template>
或者如果你的项目支持typescript【本文受版权保护】转载请注明出处：www.tangshuang.net，你可以直接从源码进行引入，这样就不必主【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】动引入css:
【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。<script setup lang="ts">
import { WebCutEditor } from 'webcut/src';
</script>
如果是非Vue的项目，则需要引用webc原创内容，盗版必究。【版权所有，侵权必究】omponents的构建产物：
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。import 'webcut/webcomponents';
import 'webcut/webcomponents/style.css';
export default function Some() {
return <webcut-editor></webcut-editor>;
}
如果是直接在HTML中使用，可以直接引入转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】webcomponents/bundle【原创不易，请尊重版权】【版权所有，侵权必究】，这样包含了Vue等依赖，就不需要另外构【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。建。
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。<script src="https://unpkg.com/webcut/webcomponents/bundle/index.js"></script> <link rel="stylesheet" href="https://unpkg.com/webcut/webcomponents/bundle/style.css" /> <webcut-editor></webcut-editor>
如果是想自己布局，则需要引入各个很小的组【原创内容，转载请注明出处】【本文受版权保护】件来自己布局。在这种情况下，你必须引入W【本文受版权保护】【本文受版权保护】ebCutProvider组件，将所有的著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】子组件包含在内。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【本文首发于唐霜的博客】<webcut-provider>
<webcut-player></webcut-player>
<webcut-export-button></webcut-export-button>
</webcut-provider>
未来展望【作者：唐霜】
【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。当前，WebCut还是处于很初级的阶段，【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】实现了最核心的能力，我的目标是能够为开发【转载请注明来源】本文作者：唐霜，转载请注明出处。者们提供一切需要的组件，并且不需要复杂的【版权所有，侵权必究】【转载请注明来源】脚本处理就可以获得视频编辑的全部功能。还本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】有很多功能没有实现，在计划中：
【本文首发于唐霜的博客】原创内容，盗版必究。【作者：唐霜】【本文首发于唐霜的博客】未经授权，禁止复制转载。- 历史记录功能，包含撤销和重做功能【访问 www.tangshuang.net 获取更多精彩内容】 著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【本文受版权保护】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。
- 内置样式的字体原创内容，盗版必究。 【原创内容，转载请注明出处】未经授权，禁止复制转载。【本文首发于唐霜的博客】【转载请注明来源】本文作者：唐霜，转载请注明出处。
- 花字，比内置样式更高级的文本【本文首发于唐霜的博客】 【版权所有，侵权必究】【原创不易，请尊重版权】原创内容，盗版必究。
- 轨道里的素材吸附能力【原创内容，转载请注明出处】 【本文受版权保护】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】
- 视频的轨道分离（音频分离）【版权所有】唐霜 www.tangshuang.net 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】本文版权归作者所有，未经授权不得转载。
- 音视频的音量调节本文作者：唐霜，转载请注明出处。 【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- 单段素材的下载导出【原创不易，请尊重版权】 【作者：唐霜】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。
- 整个视频导出时可以进行分辨率、码率、速率转载请注明出处：www.tangshuang.net【转载请注明来源】、编码、格式的选择，支持只导出音频 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
以上这些都是编辑的基本功能。还有一些是从著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net视频编辑定制化的角度思考的能力：
【原创内容，转载请注明出处】未经授权，禁止复制转载。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。- 动画（帧）支持【原创内容，转载请注明出处】 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【原创内容，转载请注明出处】
- 转场过渡效果支持【版权所有】唐霜 www.tangshuang.net 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】未经授权，禁止复制转载。【本文受版权保护】
- 扩展功能模块，这部分可能会做成收费的，下本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】载模块后，通过一个接口安装一下，就可以支【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net持某些扩展功能 原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【作者：唐霜】【本文首发于唐霜的博客】
- AI Agent能力，通过对话来执行视频【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。编辑，降低视频编辑的门槛 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】
- 视频模板，把一些流行的视频效果片段做成模【本文受版权保护】转载请注明出处：www.tangshuang.net板，在视频中直接插入后，与现有视频融合为【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。模板中的效果 【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net
- 基于AI来进行短剧创作的能力【转载请注明来源】 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】
要实现这些能力，需要大量的投入，虽然现在【未经授权禁止转载】【本文首发于唐霜的博客】AI编程非常火热，但是真正能够完美实现的【转载请注明来源】【本文首发于唐霜的博客】，其实还比较少，因此，这些工作都需要小伙【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net伴们的支持，如果你对这个项目感兴趣，可以【原创内容，转载请注明出处】【作者：唐霜】通过DeepWiki未经授权，禁止复制转载。来了解项目代码的底层结构，并未经授权，禁止复制转载。fork项目【原创不易，请尊重版权】后，向我们提PR，让我们一起共建一个属于【未经授权禁止转载】【未经授权禁止转载】我们自己的视频编辑UI框架。
【原创内容，转载请注明出处】【作者：唐霜】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】最后，你的支持是我前进的动力，动动你的小【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。手，到我们的github转载请注明出处：www.tangshuang.net上给个start，让我们知道你对此感兴趣【转载请注明来源】【转载请注明来源】。
著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net
