TutuCut

Einbettbarer Videoeditor

Eine Zeile Code bringt einen Editor mit Zeitleiste auf Ihre Website.

Die einbettbare Komponente von TutuCut: Mit einer Zeile Code holen Sie einen Videoeditor mit Zeitleiste (Schnitt, Untertitel, Effekte, Übergänge) auf jede Website. Design, Werkzeuge und Export sind konfigurierbar, Domain-Freigabe- und Sperrlisten werden unterstützt, Editor-Updates greifen automatisch.

Ein script-Tag bringt den Zeitleisten-Editor von TutuCut auf Ihre Seite. Besucher schneiden und fügen dort Untertitel und Effekte hinzu; beim Tippen auf „Fertig“ bekommt Ihre Seite das aktuelle Bild über den onSave-Callback.

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

ParameterTypBeschreibung
keystringDein öffentlicher Schlüssel pk_ (in der Konsole erstellt). Erforderlich.
theme'auto'|'light'|'dark'Theme; auto folgt dem Hell-Dunkel-Modus von Host/System.
hideHeaderbooleanBlendet die obere Leiste aus (wenn du eigenes UI baust und über export() exportierst).
hideOpenbooleanBlendet die Schaltfläche „Medien öffnen" aus.
hideExportbooleanBlendet die Schaltfläche „Exportieren & herunterladen" aus.
saveTextstringText 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.

Häufige Fragen

Beeinflusst es die Cross-Origin-Isolation meiner Seite?
Nein. Der Editor läuft in einem iframe auf der eigenen Domain von TutuCut und braucht kein SharedArrayBuffer — Ihre Seite benötigt keine COOP-/COEP-Header.
Werden die Videos der Besucher auf Ihre Server hochgeladen?
Nein. Geschnitten wird im Browser des Besuchers, und im Einbettungsmodus bleiben dort nicht einmal Entwürfe liegen. Ihre Seite erhält nur das Bild, das beim Tippen auf „Fertig“ übergeben wird.
Wie bekomme ich einen Schlüssel?
Anmelden, in der Konsole Website-Namen und Seiten-URL eintragen — schon gibt es einen öffentlichen Schlüssel, der sofort gilt. Der Schlüssel ist öffentlich; Missbrauch verhindern die eingetragenen URL-Freigabe- und Sperrlisten (Sperre hat Vorrang).

Verwandte Werkzeuge