埋め込みウィジェット
一行のコードで、サイトに動画エディターを数秒で組み込む
TutuCut のタイムラインエディター(トリミング / 字幕 / エフェクト / トランジション)をあなたの任意のサイトに組み込めます。訪問者はあなたのサイト内で直接編集でき、テーマやツールを設定でき、製品更新は自動反映、あなたは保守不要です。
コピーして貼るだけ · サイトの
</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>全パラメーター一覧
| パラメーター | 型 | 説明 |
|---|---|---|
| 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()全画面オーバーレイが閉じられた。
セキュリティ · 自動更新
- · セルフ開通・自動審査:登録ユーザーはコンソールでサイト名 + 埋め込み URL を登録すれば公開鍵を取得でき、即時有効。
- · 公開鍵は公開情報です。悪用は登録 URL のホワイト/ブラックリストで防ぎます(ブラックリスト優先)。未登録ドメインからの利用は拒否され、登録を促します。いつでも有効/無効にできます。
- · 実オリジン統計:読み込みごとに Origin 単位で計上(拒否分も計上)。コンソールで送信元の内訳が見え、未登録ドメインはワンクリックでホワイトリストに追加できます。
- · エディターは TutuCut 自身のドメインで動作します(隔離)。あなたのページは TutuCut の資格情報を一切取得できず、訪問者の TutuCut 上の非公開作品が埋め込みウィジェットに現れることもありません。
- · ウィジェットは TutuCut が自己ホスト・自動更新 —— 機能アップグレードでもあなたはコード変更不要・保守ゼロ。