Einbettbares Widget
Eine Zeile Code — füge deiner Website in Sekunden einen Video-Editor hinzu
Bette den TutuCut-Timeline-Editor (Zuschneiden / Untertitel / Effekte / Übergänge) in jede deiner Websites ein. Besucher bearbeiten Videos direkt auf deiner Seite; konfiguriere Theme und Werkzeuge, Updates greifen automatisch und du wartest nichts.
Kopieren & einfügen · vor dem
</body> deiner Website platzieren <script src="https://tutucut.com/embed.js"
data-key="pk_live_YOUR_KEY"
data-mount="#cc-editor" defer></script> Ersetze pk_live_YOUR_KEY durch einen Schlüssel, den du selbst in der Konsole erstellst (jeder registrierte Nutzer, ohne Prüfung, sofort wirksam); der Container #cc-editor braucht Breite und Höhe. Registriere beim Einbinden deine Embed-URL (Whitelist; für lokale Entwicklung localhost) — es wird nur auf den von dir registrierten Seiten angezeigt.
Live ausprobieren
Klicke auf den Button unten, um den eingebetteten Video-Editor direkt auf dieser Seite auszuprobieren.
JS-API (für Callbacks / Anpassung)
<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>Vollständige Parameterreferenz
| Parameter | Typ | Beschreibung |
|---|---|---|
| key | string | Dein öffentlicher Schlüssel pk_ (in der Konsole erstellt). Erforderlich. |
| theme | 'auto'|'light'|'dark' | Theme; auto folgt dem Hell-Dunkel-Modus von Host/System. |
| hideHeader | boolean | Blendet die obere Leiste aus (wenn du eigenes UI baust und über export() exportierst). |
| hideOpen | boolean | Blendet die Schaltfläche „Medien öffnen" aus. |
| hideExport | boolean | Blendet die Schaltfläche „Exportieren & herunterladen" aus. |
| saveText | string | Text der Schaltfläche „Fertig" (Standard „Fertig & zurücksenden", ≤16 Zeichen). |
Methoden
cc.open(url, name?)Importiert einen Medienclip in die Timeline (Video-/Audio-/Bild-URL oder dataURL).cc.export(format?)Exportiert das aktuelle Bild → Promise<{dataUrl,mime,size}>.cc.setTheme('dark')Wechselt das Theme zur Laufzeit.cc.destroy()Entfernt das Widget (entfernt das iframe).
Event-Callbacks
onReady()Der Editor ist bereit.onSave(file)Nutzer tippt auf „Fertig" → file.dataUrl ist das aktuelle Bild.onError(e)e.message ist verständlich (nicht aktiviert / keine Berechtigung / Laden fehlgeschlagen).onClose()Das Vollbild-Overlay wurde geschlossen.
Sicherheit · automatische Updates
- · Self-Service, automatisch freigegeben: Jeder registrierte Nutzer erhält einen Schlüssel, indem er in der Konsole einen Site-Namen + Embed-URL registriert — sofort wirksam.
- · Der Schlüssel ist öffentlich; Missbrauch verhindert eine Allow-/Deny-Liste registrierter URLs (Deny hat Vorrang). Nicht registrierte Domains werden mit einem Registrierungshinweis abgelehnt; du kannst jederzeit aktivieren oder deaktivieren.
- · Echte Origin-Statistik: Jeder Ladevorgang wird nach Origin gezählt (auch blockierte); die Konsole zeigt eine Aufschlüsselung pro Origin, und nicht registrierte Domains lassen sich mit einem Klick freigeben.
- · Der Editor läuft auf TutuCuts eigener Domain (isoliert); deine Seite kann keine TutuCut-Anmeldedaten abrufen, und die privaten Werke eines Besuchers auf TutuCut erscheinen nie im eingebetteten Widget.
- · Das Widget wird von TutuCut selbst gehostet und automatisch aktualisiert — Funktions-Upgrades erfordern keine Code-Änderungen von dir und keinerlei Wartung.