TutuCut

Встраиваемый видеоредактор

Одна строка кода добавляет на ваш сайт редактор с таймлайном.

Встраиваемый виджет Живая демонстрация Смотреть код Создать ключ (без модерации)

Встраиваемый компонент TutuCut: одна строка кода добавляет на любой сайт видеоредактор с таймлайном (нарезка, субтитры, эффекты, переходы). Тема, инструменты и экспорт настраиваются, поддерживаются списки разрешённых и запрещённых доменов, обновления редактора применяются сами.

Один тег script ставит редактор TutuCut с таймлайном на вашу страницу. Посетители режут, добавляют субтитры и эффекты прямо там; по кнопке «Готово» текущий кадр передаётся вашей странице как изображение через колбэк onSave.

Копировать и вставить · разместите перед </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>

Полный справочник параметров

ПараметрТипОписание
keystringВаш публичный ключ pk_ (создаётся в консоли). Обязательно.
theme'auto'|'light'|'dark'Тема; auto следует светлой/тёмной теме хоста/системы.
hideHeaderbooleanСкрыть верхнюю панель (когда вы делаете свой UI и экспортируете через export()).
hideOpenbooleanСкрыть кнопку «Открыть медиа».
hideExportbooleanСкрыть кнопку «Экспорт и скачивание».
saveTextstringТекст кнопки «Готово» (по умолчанию «Готово и вернуть», ≤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: каждая загрузка учитывается по Origin (в том числе заблокированные); в консоли виден разбор по источникам, а незарегистрированные домены добавляются в белый список одним кликом.
  • · Редактор работает на собственном домене TutuCut (изолированно); ваша страница не получает никаких учётных данных TutuCut, а личные работы посетителя в TutuCut никогда не появляются во встроенном виджете.
  • · Виджет размещается и автообновляется самим TutuCut — обновления функций не требуют изменений кода с вашей стороны и нулевое обслуживание.

Частые вопросы

Влияет ли это на кросс-доменную изоляцию моей страницы?
Нет. Редактор работает в iframe на собственном домене TutuCut и не требует SharedArrayBuffer, поэтому вашей странице не нужны заголовки COOP / COEP.
Загружаются ли видео посетителей на ваши серверы?
Нет. Монтаж идёт в браузере посетителя, а во встроенном режиме там не остаётся даже черновиков. Ваша страница получает только изображение, которое передаётся по кнопке «Готово».
Как получить ключ?
Войдите, укажите в консоли название сайта и адрес страницы — и сразу получите публичный ключ. Ключ сам по себе открытый; от чужого использования защищают указанные вами списки разрешённых и запрещённых адресов (запрет важнее).

Похожие инструменты