Принцип работы
Remotion Interactivity решает конкретную задачу авторинга: видео может отображаться правильно, но его слои трудно или невозможно редактировать через Studio. Источник объясняет, какие шаблоны разметки распознаёт редактор: встроенные стили, именованные элементы, поддерживаемые выражения интерполяции и напрямую написанные JSX-узлы.
Подход к пользовательским компонентам использует схему интерактивности, чтобы раскрывать полезные элементы управления для каждого экземпляра. Компонент со своим таймлайном также можно зарегистрировать как связанную композицию. Речь о связи между исходным кодом и видеоредактором, а не о добавлении кликабельных кнопок в опубликованное видео.
Ожидаемые результаты
- Именованные видеослои, редактируемые по отдельности
- Пользовательские компоненты с объявленными элементами управления содержимым и внешним видом
- Связанные композиции со своими редактируемыми таймлайнами
От задания до проверки
- 01Определите единицы редактирования
Перечислите клипы, сцены и слои, которые нужно менять отдельно. Дайте каждому собственный JSX-узел вместо создания всех из одного цикла.
- 02Раскройте полезные элементы управления
Добавьте InteractivitySchema для значимых свойств текста, цвета, медиа или чисел и передайте внедрённый style одному визуальному корню.
- 03Сохраняйте исходник редактируемым
Размещайте поддерживаемые ключевые кадры и стили встроенно, сохраняйте различие между кадром вызывающего кода и локальным кадром и регистрируйте повторно используемые сцены через тот же экспортируемый компонент.
- 04Проверьте правки в Studio
Выберите, переместите и настройте нужные слои в Studio, затем проверьте, записываются ли изменения в ожидаемый узел исходного кода.