TutuCut

Editor de vídeo incorporável

Uma linha de código coloca um editor com linha do tempo no seu site.

Widget incorporável Experimente ao vivo Ver o código Gerar uma chave (sem revisão)

O componente incorporável do TutuCut: com uma linha de código você leva para qualquer site um editor de vídeo com linha do tempo (cortes, legendas, efeitos, transições). Tema, ferramentas e exportação configuráveis, listas de domínios permitidos e bloqueados, e as atualizações do editor entram sozinhas.

Uma tag script coloca o editor com linha do tempo do TutuCut na sua página. Os visitantes cortam e adicionam legendas e efeitos ali mesmo; ao tocar em Concluir, o quadro atual chega à sua página como imagem pelo callback onSave.

Copiar e colar · coloque antes do </body> do seu site 
<script src="https://tutucut.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#cc-editor" defer></script>

Substitua pk_live_YOUR_KEY por uma chave gerada por você mesmo no console (qualquer usuário registrado, sem revisão, efeito imediato); o contêiner #cc-editor precisa ter largura e altura. Registre sua URL de incorporação ao integrar (lista de permissões; use localhost no desenvolvimento local); só aparece nos sites que você registrar.

Experimente ao vivo

Clique no botão abaixo para experimentar o editor de vídeo incorporado nesta própria página.

API JS (para callbacks / personalização)

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

Referência completa de parâmetros

ParâmetroTipoDescrição
keystringSua chave pública pk_ (gerada no console). Obrigatório.
theme'auto'|'light'|'dark'Tema; auto segue o modo claro-escuro do host/sistema.
hideHeaderbooleanOculta a barra superior (quando você cria sua própria UI e exporta via export()).
hideOpenbooleanOculta o botão "Abrir mídia".
hideExportbooleanOculta o botão "Exportar e baixar".
saveTextstringTexto do botão "Concluir" (padrão "Concluir e devolver", ≤16 caracteres).

Métodos

  • cc.open(url, name?)Importa um clipe de mídia para a linha do tempo (url de vídeo/áudio/imagem ou dataURL).
  • cc.export(format?)Exporta o quadro atual → Promise<{dataUrl,mime,size}>.
  • cc.setTheme('dark')Alterna o tema em tempo de execução.
  • cc.destroy()Desmonta o widget (remove o iframe).

Callbacks de eventos

  • onReady()O editor está pronto.
  • onSave(file)O usuário toca em "Concluir" → file.dataUrl é a imagem do quadro atual.
  • onError(e)e.message é legível (não habilitado / sem permissão / falha ao carregar).
  • onClose()A sobreposição em tela cheia foi fechada.

Segurança · atualizações automáticas

  • · Autoatendimento, aprovação automática: qualquer usuário registrado obtém uma chave registrando um nome de site + URL de incorporação no console, com efeito imediato.
  • · A chave é pública; o abuso é evitado por uma lista de permissão/bloqueio de URLs registradas (o bloqueio tem prioridade). Domínios não registrados são rejeitados com um aviso para registrar; você pode ativar ou desativar a qualquer momento.
  • · Análise por origem real: cada carregamento é contado por Origin (inclusive os bloqueados); o console mostra o detalhamento por origem e domínios não registrados podem ser adicionados à lista de permissões em um clique.
  • · O editor roda no próprio domínio do TutuCut (isolado); sua página não acessa nenhuma credencial do TutuCut, e as obras privadas de um visitante no TutuCut nunca aparecem no widget incorporado.
  • · O widget é auto-hospedado e atualizado automaticamente pelo TutuCut — melhorias não exigem alterações de código suas e zero manutenção.

Perguntas frequentes

Afeta o isolamento de origem cruzada da minha página?
Não. O editor roda num iframe no domínio do próprio TutuCut e não precisa de SharedArrayBuffer, então sua página não precisa de cabeçalhos COOP / COEP.
Os vídeos dos visitantes vão para os servidores de vocês?
Não. A edição acontece no navegador do visitante, e o modo incorporado nem deixa rascunhos lá. Sua página recebe só a imagem entregue quando o visitante toca em Concluir.
Como consigo uma chave?
Faça login, registre no console o nome do site e a URL da página e você recebe uma chave pública que funciona na hora. A chave é pública; o uso indevido é barrado pelas listas de URLs permitidas e bloqueadas que você registra (o bloqueio prevalece).

Ferramentas relacionadas