Что важно знать
- Рендер перематывает время, а не проигрывает страницу.
- Таймеры, случайность без зерна и сетевые ресурсы ломают кадры.
- HyperFrames — HTML и Apache 2.0, Remotion — React и платная лицензия для компаний от 4 человек.
Этап 3 из 9 · ≈ 6 ч
HTML-видео — HyperFrames и Remotion
Основа с Junior
Композиция из HTML и анимации, детерминированный рендер, выбор между HyperFrames и Remotion.
Критерии освоения
Junior ≈ 6 ч
- Собирает с агентом ролик в HyperFrames — клипы, дорожки, анимация, рендер
Практика. Собрать 15-секундный вертикальный ролик по своему брифу в HyperFrames.
Middle ≈ 6 ч
- Находит и устраняет причины недетерминированного рендера
- Выбирает между HyperFrames и Remotion с учётом команды и лицензии
Практика. Добавить в ролик частицы или счётчик и добиться одинакового результата при повторном рендере.
Вопросы с собеседований
Смотреть всеКак устроена композиция HyperFrames и как задать, когда элемент появляется на экране?Junior
Композиция HyperFrames — обычная HTML-страница: корневой элемент с data-composition-id и размерами кадра, внутри — клипы с временем начала, длительностью и дорожкой.
Полный разборПочему в превью анимация работает, а в отрендеренном видео ломается?Middle
HTML-рендер не проигрывает страницу, а перематывает её на каждый кадр. Всё, что зависит от реального времени, случайности или сети, даёт разные кадры.
Полный разборHyperFrames или Remotion — как выбрать для команды маркетинга?Middle
Оба делают MP4 из веб-технологий через безголовый Chrome и FFmpeg. Разница — язык сцены, сборка, лицензия и зрелость облачного рендера.
Полный разборДокументация
Партнёр платформы
Узнать о sotto
sotto — ассистент для живых разговоров
Помогает вести занятия, лекции и рабочие созвоны: на одном экране показывает подсказки по материалу, которые не видит аудитория, и помогает точнее отвечать на вопросы.