TutuCut

組み込み型の動画エディター

コード 1 行で、タイムライン式の動画エディターをあなたのサイトに。

埋め込みウィジェット ライブで体験 組み込みコードを見る 公開鍵を生成(審査なし)

TutuCut の組み込みコンポーネント：コード 1 行で、タイムライン式の動画エディター（カット、字幕、エフェクト、トランジション）をどんなサイトにも組み込めます。テーマ・ツール・書き出しは設定可能、ドメインの許可／拒否リストに対応し、エディターの更新は自動で反映されます。

script タグ 1 行で、TutuCut のタイムラインエディターをあなたのページに置けます。訪問者はその場でカット・字幕・エフェクトを編集し、「完了」を押すと現在のフレームが画像として 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 には幅と高さが必要です。組み込み時に埋め込み URL を登録し(ホワイトリスト、ローカル開発は 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()全画面オーバーレイが閉じられた。

セキュリティ · 自動更新

  • · セルフ開通・自動審査:登録ユーザーはコンソールでサイト名 + 埋め込み URL を登録すれば公開鍵を取得でき、即時有効。
  • · 公開鍵は公開情報です。悪用は登録 URL のホワイト/ブラックリストで防ぎます(ブラックリスト優先)。未登録ドメインからの利用は拒否され、登録を促します。いつでも有効/無効にできます。
  • · 実オリジン統計:読み込みごとに Origin 単位で計上(拒否分も計上)。コンソールで送信元の内訳が見え、未登録ドメインはワンクリックでホワイトリストに追加できます。
  • · エディターは TutuCut 自身のドメインで動作します(隔離)。あなたのページは TutuCut の資格情報を一切取得できず、訪問者の TutuCut 上の非公開作品が埋め込みウィジェットに現れることもありません。
  • · ウィジェットは TutuCut が自己ホスト・自動更新 —— 機能アップグレードでもあなたはコード変更不要・保守ゼロ。

よくある質問

自分のページのクロスオリジン分離に影響しますか？
いいえ。エディターは TutuCut 自身のドメインの iframe で動き、SharedArrayBuffer を必要としないため、あなたのページに COOP / COEP ヘッダーは要りません。
訪問者の動画はそちらのサーバーにアップロードされますか？
いいえ。編集は訪問者自身のブラウザ内で行われ、組み込みモードでは下書きも残しません。あなたのページが受け取るのは、訪問者が「完了」を押したときに渡される画像だけです。
キーはどう取得しますか？
ログインしてコンソールでサイト名と埋め込み先 URL を登録すると、公開キーがすぐに発行されます。キー自体は公開情報で、不正利用は登録した URL の許可／拒否リストで防ぎます（拒否が優先）。

関連ツール