图图剪辑

可嵌入的视频编辑器

一行代码，把时间轴编辑器放进你的网站。

可嵌入组件 在线体验 看接入代码 生成公钥(免审核)

图图剪辑的可嵌入组件：一行代码把时间轴视频编辑器（剪辑、字幕、特效、转场）放进任意网站。主题、工具、导出可配置，支持网址白名单与黑名单，编辑器升级后自动生效。

一行 script 标签就能把图图剪辑的时间轴编辑器放进你的网页。访客在你的页面里剪辑、加字幕和特效；点「完成」时，当前画面以图片形式通过 onSave 回调交给你的页面。

复制即用 · 粘到网站 </body> 前 
<script src="https://tutucut.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#cc-editor" defer></script>

把 pk_live_YOUR_KEY 换成 控制台自助生成的公钥(任何注册用户,免审核、即时生效);容器 #cc-editor 需有宽高。接入时登记你的嵌入网址(白名单,本地开发填 localhost),只在你登记的网站显示。

在线体验

点下方按钮,在本页直接体验嵌入的视频编辑器。

JS API(需要回调/自定义时)

<script src="https://tutucut.com/embed.js"></script>
<script>
  const cc = TutuCut.mount('#cc-editor', {
    key: 'pk_live_YOUR_KEY',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = current frame image (base64)
      upload(file.dataUrl);
    }
  });
  cc.open('https://your.site/clip.mp4'); // import a media clip
</script>

完整参数配置

参数类型说明
keystring你的公钥 pk_(控制台生成)。必填。
theme'auto'|'light'|'dark'主题;auto 跟随宿主/系统明暗。
hideHeaderboolean隐藏顶栏(自建 UI + 用 export() 导出时)。
hideOpenboolean隐藏「打开素材」按钮。
hideExportboolean隐藏「导出下载」按钮。
saveTextstring「完成」按钮文案(默认「完成并发回」,≤16 字)。

方法

  • cc.open(url, name?)导入一段媒体到时间轴(视频/音频/图片 url 或 dataURL)。
  • cc.export(format?)导出当前帧 → Promise<{dataUrl,mime,size}>。
  • cc.setTheme('dark')运行时切换主题。
  • cc.destroy()卸载组件(移除 iframe)。

事件回调

  • onReady()编辑器就绪。
  • onSave(file)用户点「完成」→ file.dataUrl 为当前帧图片。
  • onError(e)e.message 已转人话(未启用/无权/加载失败)。
  • onClose()全屏浮层被关闭。

安全 · 自动更新

  • · 自助开通、自动审核:任何注册用户在控制台登记站点名 + 嵌入网址即得公钥,即时生效。
  • · 公钥公开,靠登记网址白/黑名单兜底防盗用(黑名单优先);未登记域名接入会被拒并提示补登记;可随时启停。
  • · 真实来源统计:每次加载按 Origin 入账(拦截也计),控制台可见来源明细,未登记域名一键补白名单。
  • · 编辑器运行在图图剪辑自己的域(隔离);你的页面拿不到任何图图剪辑凭证,访客在图图剪辑的私有作品也不会出现在嵌入组件里。
  • · 组件由图图剪辑自托管、自动更新 —— 功能升级你无需改代码、零维护。

常见问题

会影响我页面的跨源隔离设置吗？
不会。编辑器运行在图图剪辑自己域名下的 iframe 里，不需要 SharedArrayBuffer，你的页面不用加 COOP / COEP 响应头。
访客的视频会上传到你们服务器吗？
不会。剪辑在访客自己的浏览器里完成；嵌入模式下也不会在访客浏览器里留草稿。你的页面拿到的只有访客点「完成」时交出的那张图片。
密钥怎么拿？
登录后在控制台登记站点名和嵌入网址，就能拿到公钥，即时生效。公钥本身是公开的，防盗用靠你登记的网址白名单与黑名单（黑名单优先）。

相关工具