Содержание
Монтаж видео может быть сложным, особенно если вы хотите добавить такие вещи, как анимации или наложение. Remotion упрощает процесс создания видеороликов и добавления эффектов, позволяя вам делать это программно. Remotion предоставляет фреймворк с использованием React, который позволяет вам создавать видеоролики, включая такие элементы, как заголовки, звук, наложенные компоненты и многое другое.
С выпуском Remotion 4.0 использование Remotion стало еще проще благодаря Remotion Studio. Версия 4.0 внесла несколько улучшений в Remotion, включая встроенный FFmpeg для создания видеороликов прямо с вашего локального хоста и свойства композиции с схемой Zod.
В этой статье я расскажу, как использовать Remotion Studio и приведу несколько примеров того, что можно сделать. Если вы хотите следовать вместе, пожалуйста, ознакомьтесь с моим образцовым проектом на GitHub.
Начало работы с Remotion
Прежде чем мы погрузимся в детали Remotion Studio, полезно понять некоторые основы Remotion.
Если вы хотите создать проект с Remotion, достаточно просто открыть терминал и выполнить команду npm init video. После этого вас попросят выбрать один из шаблонов Remotion для начала работы:
После создания проекта он будет иметь структуру, аналогичную проекту React:
В папке src хранятся ваши компоненты, а в папке public можно сохранять ресурсы, такие как изображения или даже видеофайлы для вставки в ваш проект. В папке src также есть файл index.ts, который будет вашей точкой входа.
Файл root будет содержать вашу первую Composition, которая представляет собой совокупный набор изображений или видео, которые будет создавать Remotion. Обратите внимание на свойство component, которое будет компонентом React, который вы напишете и передадите:
Вы будете использовать элементы AbsoluteFill в компоненте React, который вы напишете, которые фактически представляют собой div для отображения Remotion; в Remotion есть несколько встроенных элементов, таких как sequence, series и другие:
Чтобы создать композицию, вы фактически заполняете свой пользовательский компонент React и можете генерировать такие вещи, как анимации, которые вы можете запустить, просто выполнив команду npm run start в терминале в корне проекта, чтобы открыть Remotion Studio:
Сразу же вы заметите созданные вами композиции в файле root слева. Справа вы также заметите свойства, которые вы создали с помощью Zod. Если вы измените свойства справа, вы сможете видеть изменения в реальном времени.
Наконец, когда вы будете готовы создать видеоролик из вашего проекта, вы сможете нажать вкладку Renders справа, чтобы создать файл MP4. Все это встроено в Remotion и будет выводить файл без необходимости устанавливать FFmpeg или какой-либо другой инструмент напрямую.
Смотрите вывод в вашем терминале ниже:
Обратите внимание, что ниже показан дополнительный всплывающий диалог, который позволяет выбрать параметры вашего выходного файла:
Создание свойств композиции с помощью Zod
Свойства композиции могут быть мощными, потому что вы можете непосредственно редактировать их локально и генерировать предварительный просмотр вашего контента в реальном времени. В образцовом проекте, на который я ссылался во введении, я создал четыре композиции:
HelloWorld(скопирован из стартового проекта, отображает текст и изображение)OnlyLogo(скопирован из стартового проекта, с изображением логотипа React, цвет которого можно изменить)-StaticValues(демонстрирует свойства Zod, которые вы можете добавить к своим композициям)HarveyPicture(показывает, как вставлять изображение ресурса и динамически изменять его с помощью Zod)
Композиции Zod работают сначала путем определения схемы. В композиции StaticValues у меня есть соответствующий компонент StaticValues. Если вы откроете файл src/compositions/StaticValues.tsx, вы увидите, что я сначала определяю схему Zod в верхней части файла:
export const staticValueSchema = z.object({
fontColor: zColor(),
numberValue: z.number(),
arrayValue: z.array(z.string()),
enumValue: z.enum(['1.jpg', '2.jpg', '3.jpg', '4.jpg']),
dateValue: z.date(),
});
Затем вы заметите, что я ссылкаюсь на эту схему в определении моего компонента и присваиваю алиасы значениям свойств, таким как prop1, prop2 и так далее:
export const StaticValues: React.FC<z.infer<typeof staticValueSchema>> = ({
fontColor: prop1,
numberValue: prop2,
arrayValue: prop3,
enumValue: prop4,
dateValue: prop5,
}) => {
const frame = useCurrentFrame();
const opacity = Math.min(1, frame / 60);
return (
<AbsoluteFill
style={{
В самой функции рендера компонента у меня есть базовое оформление и отображение свойств:
return (
<AbsoluteFill
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
fontSize: 80,
color: prop1,
}}
>
<div style={{ opacity: opacity, padding: '20px', border: 'solid' }}>Hello World!</div>
<div style={{ opacity: opacity, padding: '20px', border: 'solid' }}>Prop Number: {prop2}</div>
<div style={{ opacity: opacity, padding: '20px', border: 'solid' }}>
array: {prop3 && prop3.map((value) => <div>{value}</div>)}
</div>
<div style={{ opacity: opacity, padding: '20px', border: 'solid' }}>enumValue: {prop4}</div>
<div style={{ opacity: opacity, padding: '20px', border: 'solid' }}>
dateValue: {prop5.toLocaleDateString()}
</div>
</AbsoluteFill>
);
Я связываю это обратно с файлом root в проекте и передаю значения по умолчанию для свойств:
<Composition
id="StaticValues"
component={StaticValues}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
schema={staticValueSchema}
defaultProps={{
fontColor: '#0c0d0d',
numberValue: 4,
arrayValue: ['one', 'two', 'three'],
enumValue: '4.jpg' as const,
dateValue: new Date('2023-09-15T18:09:01.793Z'),
}}
/>
Запустив локальный сервер, я теперь могу устанавливать эти значения и наблюдать их изменение в реальном времени:
Это довольно мощно, так как вы можете указать все, начиная от обычных строк до фактических перечислений. Это делает процесс создания видеороликов очень интуитивным.
Динамическое изменение фоновых изображений
Созданный мной выше компонент StaticValues показывает, как можно использовать схему Zod для создания свойств и редактировать их на лету. Более реалистичным примером было бы иметь фоновое изображение, которое можно было бы динамически изменять.
В композиции HarveyPicture у меня фактически есть заголовок и фоновое изображение моей собаки Харви. Если вы запустите ваш локальный сервер, вы увидите видеоролик с заголовком и краткой анимацией вращения изображения:
Свойство imageName фактически является перечислением! Я определил эту схему в файле src/compositions/HarveyPicture.tsx следующим образом:
export const harveyPictureSchema = z.object({
titleText: z.string(),
titleColor: zColor(),
imageName: z.enum(['1.jpg', '2.jpg', '3.jpg', '4.jpg']),
});
Файлы изображений находятся в папке public вашего проекта:
Теперь я могу динамически изменить это фоновое изображение для создаваемого мной видеоролика. Этот пример очень прост, но с немного большим кодом вы могли бы создать набор из таких элементов или хотя бы изменить фон на любую последовательность анимаций, которую вы хотите.
Рендеринг FFmpeg
Как я упоминал во введении, Remotion 4.0 включает в себя FFmpeg в составе. Это очень мощно, поскольку теперь вы можете создавать видеофайлы напрямую из вашего локального проекта. В предыдущих версиях Remotion вам приходилось использовать выходные ресурсы и отдельно устанавливать FFmpeg для создания видеофайла. В последней версии студия позволяет вам создавать видео напрямую.
Вернемся к моему примеру с Харви. Если я нажму Рендер видео, мне покажется всплывающее окно, в котором будут присутствовать свойства, которые я определил, а также несколько других параметров, которые я могу настроить для своего видео:
После того как я сделаю свой выбор, нажатие на Рендер видео запустит процесс создания видео, и я смогу следить за его выполнением в моем локальном терминале:
Подведение итогов
С этим вы можете создавать видеоролики, включая анимации и наложение, с использованием Remotion Studio и библиотеки React. Это делает создание видеороликов гораздо более доступным и понятным, чем ручное монтажное редактирование. Надеюсь, эта статья была полезной, и вы попробуете создать свои видеоролики с использованием Remotion Studio.