图图剪剪 · 可嵌入组件
一行代码,网站秒接视频编辑器
把图图剪剪时间轴编辑器(剪辑 / 字幕 / 特效 / 转场)嵌入你的任意网站。访客直接在你站内剪片, 可配置主题与工具,产品更新自动生效、你零维护。
复制即用 · 粘到网站
</body> 前 <script src="https://tutucut.com/embed.js"
data-key="pk_live_你的公钥"
data-mount="#cc-editor" defer></script> 把 pk_live_你的公钥 换成控制台生成的公钥;容器 #cc-editor 需有宽高。可设域名白/黑名单,只在你的网站显示。
在线体验
点下方按钮,在本页直接体验嵌入的视频编辑器。
JS API(需要回调/自定义时)
<script src="https://tutucut.com/embed.js"></script>
<script>
const cc = TutuCut.mount('#cc-editor', {
key: 'pk_live_你的公钥',
theme: 'auto', // auto | light | dark
onSave: (file) => {
// file.dataUrl = 当前帧图片(base64)
upload(file.dataUrl);
}
});
cc.open('https://your.site/clip.mp4'); // 导入一段媒体
</script>完整参数配置
| 参数 | 类型 | 说明 |
|---|---|---|
| key | string | 你的公钥 pk_(控制台生成)。必填。 |
| theme | 'auto'|'light'|'dark' | 主题;auto 跟随宿主/系统明暗。 |
| hideHeader | boolean | 隐藏顶栏(自建 UI + 用 export() 导出时)。 |
| hideOpen | boolean | 隐藏「打开素材」按钮。 |
| hideExport | boolean | 隐藏「导出下载」按钮。 |
| saveText | string | 「完成」按钮文案(默认「完成并发回」,≤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()全屏浮层被关闭。
安全 · 自动更新
- · 公钥公开,靠接入站点白/黑名单兜底防盗用(黑名单优先);可随时启停。
- · 编辑器运行在图图剪剪自己的域(隔离);你的页面拿不到任何图图剪剪凭证。
- · 组件由图图剪剪自托管、自动更新 —— 功能升级你无需改代码、零维护。