点击上方关注 TianTianUp,一起学习,天天进步
大家好,我是小弋。
分享的内容是:
如何使用 React Remotion 来创建视频的,如果你之前对视频很感兴趣的话,这篇文章可以参考。
正文
Remotion是一个最近推出的库,它允许您使用 React 创建视频和动态图形。作为一名 Web 开发人员,我发现它非常有趣,因为它为我们自己创建视频和动画打开了一扇新的大门。
它的官网:
https://www.remotion.dev/
简介
![](https://i-blog.csdnimg.cn/blog_migrate/8978617230613ea65a8c33d397fc323b.png)
正如我提到的,Remotion是最近推出的一个令人兴奋的库,它允许你使用你最喜欢的网络技术,如HTML、CSS、JavaScript、TypeScript等来创建视频和动画。
除此之外,你还可以使用你所有关于编程、函数、算法、API的知识来为视频添加各种效果。作为一个基于React的库,Remotion能够最大限度地利用Reacts的特性,如可重用的组件、强大的组合和快速重载。
Remotion还配备了一个被称为Remotion Player的播放器,它给你带来了真正的视频编辑器的感觉,它可以用浏览器来播放和审查你的视频。
如何设置Remotion?
创建一个新的Remotion项目是非常简单的。但有两个依赖项你应该先安装。
步骤1:安装NodeJS和FFMPEG
由于安装NodeJS是非常常见的,我将重点介绍安装FFMPEG。首先,你需要从他们的下载页面下载合适版本的FFMPEG。
![](https://i-blog.csdnimg.cn/blog_migrate/37e9fe2752957aa0b67d6bb7576f4db8.png)
然后将其解压到你选择的文件夹中,并在CMD中以管理员权限运行以下命令(在windows中)来更新你的路径变量。
setx /M PATH "path\to\ffmpeg\bin;%PATH%"
第2步:启动新项目
安装完上述依赖后,初始化一个新的Remotion视频只需要一个命令,你可以使用yarn或npm来实现。
yarn create video
or
npm init video
你已经成功地初始化了你的第一个Remotion项目,你可以使用npm run start来启动该项目。
![](https://i-blog.csdnimg.cn/blog_migrate/4115e202223a9edd611e9fd543e15c75.gif)
Remotion的基础知识
既然你已经启动了你的Remotion项目,你可以开始创建你的视频。但我认为在这之前,如果你对Remotion的基础知识有一定的了解会更好。
Video Properties
Width, height, durationInFrames, fps是由Remotion提供的视频属性。
你可以在组件中使用这些属性来配置组件的像素大小,该组件应该播放多少帧,以及每秒钟的帧数。
import { useVideoConfig } from “remotion”;export const ExampleVideo = () => {
const { fps, durationInFrames, width, height } = useVideoConfig();return (
<div style={
{ flex: 1, justifyContent: “center”, alignItems: “center” }}>
This video is {durationInFrames / fps} seconds long.
</div>
);
};
建议使用useVideoConfig派生这些属性,就像上面的例子一样,使你的组件可以重复使用。
Compositions
Compositions也是Remotion中的一种组件,在这里你可以使用上述属性作为元数据。
import {Composition} from 'remotion';
import {HelloReaders} from './HelloReaders';export const RemotionVideo: React.FC = () => {
return (
<>
<Composition
id=”HelloReaders”
component={