TutuCut

Éditeur vidéo intégrable

Une ligne de code ajoute un éditeur à timeline à votre site.

Widget intégrable Essayer en direct Voir le code Générer une clé (sans validation)

Le composant intégrable de TutuCut : une ligne de code ajoute à n'importe quel site un éditeur vidéo à timeline (découpe, sous-titres, effets, transitions). Thème, outils et export configurables, listes de domaines autorisés ou bloqués, et les mises à jour de l'éditeur s'appliquent automatiquement.

Une balise script place l’éditeur à timeline de TutuCut dans votre page. Les visiteurs découpent et ajoutent sous-titres et effets sur place ; quand ils appuient sur Terminé, l’image affichée est transmise à votre page via le callback onSave.

Copier-coller · placez-le avant le </body> de votre site 
<script src="https://tutucut.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#cc-editor" defer></script>

Remplacez pk_live_YOUR_KEY par une clé que vous générez vous-même dans la console (tout utilisateur inscrit, sans validation, effet immédiat) ; le conteneur #cc-editor doit avoir une largeur et une hauteur. Enregistrez votre URL d'intégration (liste blanche ; utilisez localhost en développement local) — il ne s'affiche que sur les sites que vous enregistrez.

Essayer en direct

Cliquez sur le bouton ci-dessous pour essayer l'éditeur vidéo intégré directement sur cette page.

API JS (pour callbacks / personnalisation)

<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>

Référence complète des paramètres

ParamètreTypeDescription
keystringVotre clé publique pk_ (générée dans la console). Requis.
theme'auto'|'light'|'dark'Thème ; auto suit le mode clair-sombre de l'hôte/système.
hideHeaderbooleanMasque la barre supérieure (quand vous créez votre propre UI et exportez via export()).
hideOpenbooleanMasque le bouton « Ouvrir un média ».
hideExportbooleanMasque le bouton « Exporter et télécharger ».
saveTextstringTexte du bouton « Terminé » (par défaut « Terminer et renvoyer », ≤16 caractères).

Méthodes

  • cc.open(url, name?)Importe un média dans le montage (url vidéo/audio/image ou dataURL).
  • cc.export(format?)Exporte l'image actuelle → Promise<{dataUrl,mime,size}>.
  • cc.setTheme('dark')Change le thème à l'exécution.
  • cc.destroy()Démonte le widget (supprime l'iframe).

Callbacks d'événements

  • onReady()L'éditeur est prêt.
  • onSave(file)L'utilisateur appuie sur « Terminé » → file.dataUrl est l'image de l'image actuelle.
  • onError(e)e.message est lisible (non activé / pas d'autorisation / échec de chargement).
  • onClose()La surcouche plein écran a été fermée.

Sécurité · mises à jour automatiques

  • · En libre-service, approuvé automatiquement : tout utilisateur inscrit obtient une clé en enregistrant un nom de site + une URL d'intégration dans la console, avec effet immédiat.
  • · La clé est publique ; l'abus est évité par une liste blanche/noire d'URL enregistrées (la liste noire est prioritaire). Les domaines non enregistrés sont refusés avec une invite à s'enregistrer ; vous pouvez activer ou désactiver à tout moment.
  • · Statistiques par origine réelle : chaque chargement est compté par Origin (les blocages aussi) ; la console affiche le détail par origine et les domaines non enregistrés s'ajoutent à la liste blanche en un clic.
  • · L'éditeur s'exécute sur le domaine propre de TutuCut (isolé) ; votre page ne peut accéder à aucun identifiant TutuCut, et les œuvres privées d'un visiteur sur TutuCut n'apparaissent jamais dans le widget intégré.
  • · Le widget est auto-hébergé et mis à jour automatiquement par TutuCut — les améliorations ne nécessitent aucune modification de code de votre part et zéro maintenance.

Questions fréquentes

Cela touche-t-il l’isolation cross-origin de ma page ?
Non. L’éditeur tourne dans un iframe sur le domaine de TutuCut et n’a pas besoin de SharedArrayBuffer : votre page n’a besoin d’aucun en-tête COOP / COEP.
Les vidéos des visiteurs sont-elles envoyées sur vos serveurs ?
Non. Le montage se fait dans le navigateur du visiteur, et le mode intégré n’y laisse même pas de brouillon. Votre page ne reçoit que l’image transmise quand le visiteur appuie sur Terminé.
Comment obtenir une clé ?
Connectez-vous, enregistrez dans la console le nom du site et l’URL de la page, et vous obtenez une clé publique active immédiatement. La clé est publique ; les abus sont bloqués par vos listes d’URL autorisées et interdites (l’interdiction l’emporte).

Outils liés