可嵌入元件

一行程式碼,網站秒接影片編輯器

把圖圖剪輯時間軸編輯器(剪輯 / 字幕 / 特效 / 轉場)嵌入你的任意網站。訪客直接在你站內剪片,可配置主題與工具,產品更新自動生效、你零維護。

複製即用 · 粘到網站 </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>

完整引數配置

引數	型別	說明
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()全屏浮層被關閉。

安全 · 自動更新

· 自助開通、自動稽核:任何註冊使用者在控制台登記站點名 + 嵌入網址即得公鑰,即時生效。
· 公鑰公開,靠登記網址白/黑名單兜底防盜用(黑名單優先);未登記域名接入會被拒並提示補登記;可隨時啟停。
· 真實來源統計:每次載入按 Origin 入賬(攔截也計),控制台可見來源明細,未登記域名一鍵補白名單。
· 編輯器執行在圖圖剪輯自己的域(隔離);你的頁面拿不到任何圖圖剪輯憑證,訪客在圖圖剪輯的私有作品也不會出現在嵌入元件裡。
· 元件由圖圖剪輯自託管、自動更新 —— 功能升級你無需改程式碼、零維護。