TutuCut

可嵌入的影片編輯器

一行程式碼，把時間軸編輯器放進你的網站。

可嵌入元件 線上體驗 看接入程式碼 生成公鑰(免稽核)

圖圖剪輯的可嵌入元件：一行程式碼把時間軸影片編輯器（剪輯、字幕、特效、轉場）放進任意網站。主題、工具、匯出可設定，支援網址白名單與黑名單，編輯器升級後自動生效。

一行 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 回應標頭。
訪客的影片會上傳到你們伺服器嗎？
不會。剪輯在訪客自己的瀏覽器裡完成；嵌入模式下也不會在訪客瀏覽器裡留草稿。你的頁面拿到的只有訪客點「完成」時交出的那張圖片。
金鑰怎麼拿？
登入後在控制台登記網站名稱和嵌入網址，就能拿到公鑰，即時生效。公鑰本身是公開的，防盜用靠你登記的網址白名單與黑名單（黑名單優先）。

相關工具