Skip to main content

Remotion 2.4

· 6 min read
Jonny Burger
Remotion 创始人

在这个版本中,我们正在重新设计 Remotion 预览界面,使其更易于阅读并添加新功能。虽然 Remotion 总是关于利用代码而不是点击按钮,但我们希望添加辅助工具来帮助您更快地完成视频制作!

新工具栏

现在,可以在顶部的工具栏中组织在编辑器中可以执行的所有操作,此外,我们还添加了快速链接到资源,如文档、更改日志、GitHub、支持选项以及我们的社交媒体账号(在那里关注我们!)。

“新合成”助手

您可以按 N 键打开一个模态框,帮助您生成用于创建新的 <Composition /><Still /> 的代码。拖动滑块快速调整视频的尺寸和持续时间。锁定或解锁纵横比。单击数字输入确切值。在配置无效时接收警告。一旦您对代码满意,就可以单击复制按钮并将其粘贴到您的 src/Root.tsx 文件中。

“键盘快捷键”窗格

要查看所有键盘快捷键的概述,现在可以按 ? 键显示所有快捷键列表。

改进的键盘导航

对于那些不使用鼠标的真正黑客,我们优化了整个新 UI,只需使用键盘即可使用。使用 Tab 键聚焦项目,使用箭头键在菜单中导航。按 EnterSpace 单击项目。使用 Escape 退出模态框和菜单。

使用 0 个依赖构建

我们希望为预览添加新功能,但不想通过添加大量第三方包使 Remotion 变得臃肿,这些包会增加启动时间,并最终导致您与包管理器作斗争。因此,我们精心打造了没有除 React 和 Remotion 外任何依赖的编辑器(Remotion 本身也只有 reactreact-dom 作为其唯一的依赖项)。

其他改进

  • 新的 <Series /> 组件:在 2.3.2 版本中引入了一个新的 <Series /> 组件,可帮助您在一排中布局许多序列。查看此帖子(Instagram | Twitter)以获取额外的信息图解!

  • 更好地处理浏览器自动播放策略:如果您在 <Player /> 中包含音频,则可能会遇到浏览器限制的情况,因为由于浏览器的自动播放策略,音频无法播放。Remotion 现在可以通过在用户主动触发 Remotion Player 播放时播放一些静音音频来避免其中一些情况。如果您稍后想要播放一些音频,则 Remotion 将将该音频路由到已经播放静音音频并已从浏览器的播放限制中释放的 <audio /> 标签。您可以使用 numberOfSharedAudioTags 属性控制 Remotion 应放置的静音音频标签的数量。

  • 更好地处理无效尺寸:事实证明,MP4 只能具有偶数尺寸。因此,虽然 1000x1000px 的 MP4 完全没问题,但根据规范,999x999px 的 MP4 是不可能的。现在,在渲染时不再出现错误,而是通过新的 ESLint 规则和在使用“新合成”对话框时提前警告您。

  • 修复使用 frameRange 时的错误:在使用 frameRange 选项时,一个一次性错误会导致渲染错误的帧。如果您指定了 0-20 的帧范围,则会渲染帧 -119。现在已经纠正了这个问题,如果您依赖此选项,请确保更新后您的视频按预期渲染!

This is the translated text in Chinese. Let me know if you need any more translations.

  • 组件直接挂载到所需的帧: 在渲染过程中,以前浏览器总是会将 React 组件挂载在帧 0,然后使用应该渲染的初始帧更新组件。现在已经更改了这一点,因此,如果您例如使用 frameRange 选项来渲染帧 20-39,在此更新后,您的组件现在永远不会在帧 0 处挂载。

接下来

我们正在努力改进渲染流程,并添加更多渲染 Remotion 视频的方式,并计划将其作为一个主要版本升级(v3.0)发布,其中包含一些破坏性更改。请继续关注我们发布的公告,了解我们如何使 Remotion 更易于扩展。

Remotion 2.3

· 5 min read
Jonny Burger
Remotion 创作者

Remotion 2.3 已发布,新增了对静态图像的一流支持

到目前为止,我们一直致力于简化制作视频的工作流程。虽然始终可以渲染出单个图像而不是编码视频,但在此版本中,我们已经优化了这种用例。

<Still /> 组件

这个新组件<Composition /> 相同,但用于定义输出静态图像的组合。由于这已经是暗示的,您不必定义 fpsdurationInFrames 属性。

tsx
<Still
id="Thumbnail"
component={Thumbnail}
width={1200}
height={627}
defaultProps={{
title: "Welcome to Remotion",
description: "Edit Video.tsx to change template",
slogan: "Write videos\nin React",
}}
/>;
tsx
<Still
id="Thumbnail"
component={Thumbnail}
width={1200}
height={627}
defaultProps={{
title: "Welcome to Remotion",
description: "Edit Video.tsx to change template",
slogan: "Write videos\nin React",
}}
/>;

针对静态图像优化的编辑器

现在侧边栏中有用于组合的图标,而静态图像的图标为图像图标。


现在静态图像(持续时间为 1 帧的组合)带有特殊图标标记。

对于静态图像,您不需要时间轴,因此它将隐藏自身并为您提供更大的画布。


remotion still 命令

渲染静态图像也变得更加简单。新的 remotion still 命令允许您快速在命令行上生成 PNG 或 JPEG。

npx remotion still --props='{"custom": "data"}' my-comp out.png
npx remotion still --props='{"custom": "data"}' my-comp out.png

renderStill() API

如果您使用 Node.JS API 进行渲染,我们还为静态图像渲染提供了一个新的等效 API。

ts
await renderStill({
composition,
serveUrl: bundleLocation,
output: "/tmp/still.png",
inputProps: {
custom: "data",
},
});
ts
await renderStill({
composition,
serveUrl: bundleLocation,
output: "/tmp/still.png",
inputProps: {
custom: "data",
},
});

具有服务器渲染的新静态模板

我们已经制作了一个新的模板,其中包括一个社交媒体预览卡和一个服务器,您可以自定义并轻松部署到云端。我们已在DigitalOcean和Heroku上进行了测试,并添加了部署说明。

我们使用此服务为您正在阅读的博客文章生成社交预览卡。随时访问以下网址并尝试调整参数:

https://remotion-still.herokuapp.com/PreviewCard.jpeg?title=Remotion%202.3&description=%3CStill%20/%3E%20component,%20renderStill()%20API,%20optimized%20editor%20and%20CLI,%20Server%20rendering%20template

该服务器包括不同的缓存选项、速率限制和一次仅限制为1个渲染,希望它已准备好投入生产。我们将该网址提供给您进行测试,如果出现任何意外问题,我们将修复模板。

🔜 无服务器正在进行中

我们还在努力让静态图像渲染在无服务器环境中运行,并为此提供一个框架。我们计划在今年秋天推出它 - 如果您有兴趣测试早期版本,请在我们的Discord中给我们留言。

yarn create video 现在有多个模板可供选择

创建新视频时,您现在可以在不同模板之间进行选择,这为您的用例提供了一个很好的起点。


除了默认模板和先前宣布的Three.JS模板外,现在还有一个纯JS模板、一个文本到语音模板以及上述的静态模板。

播放器现在支持空格键播放/暂停

<Player /> 组件现在支持新的 spaceKeyToPlayOrPause 属性来切换视频播放。我们设计时考虑了焦点管理,因此当同一页上有多个播放器时,它的行为良好。此属性默认为 true

Remotion 2.2

· 13 min read
Jonny Burger
Remotion 创始人

欢迎来到 Remotion 2.2 的发布说明!距离 v2.1 已经有一段时间了,但在此期间我们还发布了十几个较小的版本。本文总结了过去两个月的亮点 🎉。

环境变量支持

我们开发人员广泛使用环境变量来管理配置、密钥和其他不希望提交到 GitHub 存储库的内容。如果您用代码编写视频,环境变量也很有用!

我们增加了从 CLI 支持环境变量的功能,使用 .env 文件,并允许您通过我们的 Node.JS API 传递环境变量。点击此处了解更多信息。

<Freeze /> 组件

这个新的核心组件将冻结其所有子元素,并使它们认为视频在某个特定时间暂停。

您可以使用它来显示视频的静止画面,例如:

MyVideo.tsx
tsx
import {Freeze, Video} from 'remotion';
import myVid from './vid.mp4';
 
export const MyVideo = () => {
return (
<Freeze frame={30}>
<Video src={myVid} />
</Freeze>
);
};
MyVideo.tsx
tsx
import {Freeze, Video} from 'remotion';
import myVid from './vid.mp4';
 
export const MyVideo = () => {
return (
<Freeze frame={30}>
<Video src={myVid} />
</Freeze>
);
};

但是,它适用于任何内容。正如您所看到的,API 非常简单!您可以将其与 <Sequence> API 结合使用,使任何内容播放、暂停,然后继续播放。

在此处阅读有关 <Freeze /> 组件的文档。

视频 + 音频 playbackRate

此属性允许您减慢或加快视频和音频元素的播放速度!现在您可以以正常速度导入视频,然后以慢动作或延时播放它,而无需重新渲染视频。

LightningSpeed.tsx
tsx
import {Video} from 'remotion';
import myVid from './vid.mp4';
 
export const MyVideo = () => {
return <Video src={myVid} playbackRate={4} />;
};
LightningSpeed.tsx
tsx
import {Video} from 'remotion';
import myVid from './vid.mp4';
 
export const MyVideo = () => {
return <Video src={myVid} playbackRate={4} />;
};

在预览时,我们使用 HTML5 的 playbackRate API,渲染时,我们将为任何速度计算正确的 FFMPEG 命令。

了解有关 <Audio />playbackRate 属性和 <Video />playbackRate 属性的更多信息。

@remotion/three

如果你错过了,我们发布了一个新的辅助包,用于 React Three Fiber

0:00 / 0:10

毫不夸张地说,Three.JS 并不容易,但是通过 Poimandres 所做的工作,使其更易接近并与 React 更加集成,这一切正在迅速改变。在 React 中创建 3D 视频并将其渲染为真实的 MP4 视频,这是可能的!

了解更多关于 @remotion/three 的信息,并开始使用我们的 模板

ProRes 支持和 MKV 支持

在 React 中创建 MP4 视频,这只是我们的营销口号。我们还支持许多其他编解码器,如 H265、WebM,甚至透明的 WebM!

我们正在添加另外两种编解码器:

  • ProRes 是一种适用于使用 Final Cut Pro、Adobe Premiere 或 Davinci Resolve 的视频编辑人员的编解码器。假设您想使用 Remotion 创建一个叠加动画,并在传统的视频剪辑程序中使用它,您现在可以使用 ProRes 导出带有 alpha 通道的视频,并无损地导入到许多其他程序中。

  • Matroska 容器格式(可以通过 .mkv 扩展名识别)通常也只包含 H.264 视频,这是 MP4 所使用的相同编解码器。但是它对音频有更大的灵活性,并允许无损音频流被该格式包含。MKV 支持将对即将推出的 Remotion 功能非常有用,并且是让我们迈向月球的第一步。

阅读 编码指南 以查看所有选项的概述。

<Player /> 更新

@remotion/player,目前仍处于实验阶段,允许在 Web 上播放 Remotion 视频而无需对其进行编码。我们已经取得了以下进展,以使其更加稳定:

音频控件

现在播放器具有音量滑块和静音按钮,允许用户控制视频。您可以使用 showVolumeControls 属性决定是否要显示这些控件。

音频也可以通过编程方式进行控制。我们添加了getVolume()setVolume()mute()unmute()isMuted()方法,以便您实现自己的解决方案。

timeupdate 事件

受到同名的 HTML5 事件的启发,我们向 Player 添加了一个timeupdate事件。与seeked事件不同,它不会在每一帧上触发,因此如果您只想定期更新有关时间更新的信息,可以使用此事件而无需对其进行节流。

clickToPlay 属性

此属性允许您控制用户是否允许单击视频进行暂停或播放。如果播放器的控件已启用,默认值为 true。

doubleClickToFullscreen 属性

此属性允许您控制用户是否允许双击视频进行全屏显示。如果启用,单击暂停视频将有一个短暂延迟,以等待可能的第二次单击。

时间轴滚动位置得到保留

在编写视频并刷新预览时,视频会跳回到第一帧,这很烦人。现在不会了 - 如果刷新,您将回到离开的地方!

Remotion 等待字体加载

如果通过 Google Fonts 加载 Web 字体,它将使用 font-display: swap 进行加载,这意味着 Remotion 有时会在字体加载之前呈现一帧。现在我们使用 document.fonts.ready 浏览器 API,使加载 Web 字体对您完全无缝。

指定自定义 --port

默认情况下,Remotion 预览会在端口 3000 上启动服务器。如果出于任何原因希望它在不同端口上启动,现在可以传递一个 CLI 标志。

更多有用的错误处理

我们希望在您遇到棘手问题时帮助您。以下是一些我们现在为您提供有用警告并链接到文档的情况的示例:

  • 在页面上导入了多个 Remotion 版本(例如在应用程序中使用 <Player /> 时)
  • 加载了不支持寻址的视频(例如从 Google Cloud 存储中提供服务时)
  • 加载了一个不支持的编解码器的视频(例如在 Chromium 浏览器中的 MP4)
  • 创建了一个 delayRender() 处理程序,但从未清除

文档升级

搜索

现在我们在文档右上角有一个搜索框!感谢 Algolia 提供主机和索引文档的小部件。

类型提示

你是否在上面的代码片段中注意到了?现在你可以将鼠标悬停在任何符号上并查看其类型。它由 Typescript + Twoslash 提供支持。一个非常好的副作用是,我们现在无法在文档中犯任何拼写错误,因为所有代码片段都经过了类型检查。

故障排除指南

我们现在有关于可能遇到的各种问题的帮助文章。目前我们已经写了关于 6 个常见问题,并将它们放在了文档的一个新部分中,名为故障排除。

第三方集成页面

创建了一个新页面,列出了一些流行的库,并描述了它们与 Remotion 的良好配合情况 - 或者不配合情况。

新的首页

最后,Remotion 的首页进行了改头换面!我们希望更好地传达 Remotion 是什么以及为什么它很棒。

各种 Bug 修复

  • 修复了调用 getCompositions() 时的内存泄漏问题 #480
  • 为 Dockerfile 添加了 emoji 支持 #476
  • 预览现在在时间轴中显示序列中的当前时间 #468
  • TTF 字体现在可以本地加载 #462
  • 修复了 Remotion Player 假定自身处于渲染环境中的问题 #460
  • 修复了 getAudioMetadata() 和 getAudioDuration() 在 onError 事件中未返回错误的问题 #459
  • 添加了如何使用 TailwindCSS 的文档 69b079e
  • 修复了如何使用 SASS/SCSS 的文档 e92c917
  • 如果您使用纯 JS 入口文件,还可以使用 remotion.config.js 配置文件 #475
  • 您可以使用 Config.Preview.setMaxTimelineTracks() 自定义最多显示多少时间轴轨道 #439
  • 修复了环境变量不会立即可访问的 bug #432
  • 输入属性标志现在也可以传递给预览 #430
  • 更好地验证最常见函数的输入
  • 改进了渲染非常长的视频,使用更少的内存并避免最大调用堆栈超出错误消息。#398
  • 不再允许将 crf 设置为 0 用于 H264 视频,因为这将导致视频在所有平台上都无法播放。#379
  • <Sequence /> 的文档现在具有交互式示例。#378
  • 向核心函数添加了大量测试。#376 等等。
  • 改进了 Typescript 类型,允许传递更多类型的组件给 component#372

感谢所有贡献者

这些功能大部分是由社区提出并实现的,这太棒了。是时候表扬一下了!

  • 感谢 Björn Zeutzheim 实现了 @remotion/three 包!
  • 感谢 Frenco 使所有文档代码片段类型安全,并添加了悬停预览。你甚至修复了 Twoslash 中的一个 bug,这个库支持这个功能,并且非常细心地执行了这个操作!
  • 感谢 cnnr 实现了环境变量支持!
  • 感谢 Arthur Denner 发现了 document.fonts.ready 功能!
  • 感谢 Ashik Meerankutty 为 Player 实现了 timeupdate 事件!
  • 感谢 Soham Shah 添加了 GitHub Issue 模板,并致力于 Next.JS 模板!
  • 感谢 William Candillon 实现了 ProRes 支持!
  • 感谢 Salvatore 为 Video 和 Audio 组件实现了 playbackRate 支持!
  • 感谢 ahgsql 改进了时间线中 Sequences 的显示方式!
  • 感谢 Mika Andrianarijaona 实现了 --port 参数!
  • 感谢 Jonas BrunnerTobias BonerCalvin Falter 大大改进了测试覆盖率!
  • 感谢 Tamás Sallai 提交并评论了许多重要问题,并起草了可访问性功能。

以及许多其他贡献修复 bug 和改进文档。

业务更新

我们开始看到人们使用 Remotion 推出产品和创业公司,这太棒了。敬请关注即将发布的文章,重点介绍人们如何将 Remotion 用于他们的业务案例!在撰写本文时,目前有五家客户拥有 公司许可证

除了Shankhadeep Dey之外,我们还欢迎Mehmet Ademi加入团队,担任项目经理和业务开发人员。

我们正在越来越多地对非紧急问题进行悬赏,迄今已向Remotion贡献者支付了657美元的奖励,此外,我们还向被我们联系的顶级贡献者支付了数千美元。

我们正在多方面努力,使Remotion对于希望将程序化视频集成到其产品中的企业和Indie Hackers变得更加优秀 - 敬请关注!

Remotion 2.1

· 5 min read
Jonny Burger
独立开发者

这个版本发布了新的实用功能、改进的开发者体验以及实验性的 Remotion 播放器发布!

新的 interpolateColors() 函数 🌈

现在您可以轻松地在颜色之间进行动画处理,并混合颜色以创建有趣的动画,使用 interpolateColors()

我个人使用它在 Remotion 中重新创建了苹果的“Spring Loaded”标志,仅使用 <div> 元素。

感谢 Shankhadeep Dey 实现了这个功能!

新的 measureSpring() 函数 🌀

使用弹簧动画进行过渡时的一个问题是,您不知道动画的持续时间。这就是为什么我们添加了一个新的 measureSpring() 函数!

现在您可以在更改弹簧配置时动态调整 Remotion 中的时间。

感谢 Samuel Rodriguez-Lozano 实现了这个功能!

文档和开发者体验更新

我们花费了时间确保如果出现问题,您不会陷入困境。以下是我们为改进您在 Remotion 中的体验所做的一些工作:

  • 如果遇到超时,您现在将看到未清除 delayRender() 句柄的堆栈跟踪。我们现在还有一个超时故障排除页面,并在遇到错误时链接到文档。
  • 如果您使用 Chromium 并导入 MP4 视频,您将获得更有帮助的错误信息,并链接到帮助页面
  • 我们添加了一个指南,以改进在开发和渲染时的性能
  • 服务器端渲染的 API bundle()getCompositions()renderFrames()stitchFramesToVideo() 及其所有参数现在都有更详细的文档。
  • 如果在渲染时抛出异常,控制台中的日志输出现在更好。
## `@remotion/player` 的 Alpha 版本
我们正在开发一个 Remotion 播放器组件,您可以将其导入到您的 React 应用程序中。今天,我们为那些希望尝试并向我们提供反馈的人预发布了播放器。请告诉我们您的想法!
[**阅读 `@remotion/player` 的文档**](/docs/player)
<PlayerExampleWithControls />
## 测试覆盖率更新
我们现在拥有超过 450 个测试,Remotion 核心现在的测试覆盖率已经超过 80%。感谢 Tobias Boner、Calvin Falter 和 Jonas Brunner 持续进行大规模的测试倡议!
我们现在还跨不同的 Node 版本(12、14 和 16)、npm 版本(v6 和 v7)以及 FFMPEG 版本(4.1 和 4.4)进行测试,除了在 3 个不同的操作系统上进行测试,以便我们可以自信地快速发布新功能。
对于贡献者,我们现在有一个 [TESTING.md](https://github.com/remotion-dev/remotion/blob/main/TESTING.md) 文件。
## 其他
- 您现在可以按 <kbd>Shift+Right Arrow</kbd> 键在时间轴中向前跳转 1 秒,按 <kbd>Shift+Left Arrow</kbd> 键向后跳转 1 秒。
- `npm init video` 现在将使用 NPM 设置一个 Remotion 项目,`yarn create video` 将使用 Yarn 设置一个项目。
- Node 16 和 NPM 7 现在得到更好的支持,安装和执行过程中不会显示任何警告。
- 修复了几个音频渲染问题:[#292](https://github.com/remotion-dev/remotion/issues/292) [#293](https://github.com/remotion-dev/remotion/issues/293) [#320](https://github.com/remotion-dev/remotion/issues/320)
- 当编辑器中出现更新横幅时,您现在可以单击以复制命令。
- 您现在可以将 React 的 `ref` 传递给 `<Audio/>` 和 `<Video />` 标签。
- 我们改进了 CLI 输出!您喜欢吗?
- 编辑器中的预览大小选项现在是持久的,感谢 [Oluwatobiju Judah](https://github.com/Tobijudah)!
- 在编辑器中,默认情况下启用了透明度切换。
## `@remotion/player` 的 Alpha 版本
我们正在开发一个 Remotion 播放器组件,您可以将其导入到您的 React 应用程序中。今天,我们为那些希望尝试并向我们提供反馈的人预发布了播放器。请告诉我们您的想法!
[**阅读 `@remotion/player` 的文档**](/docs/player)
<PlayerExampleWithControls />
## 测试覆盖率更新
我们现在拥有超过 450 个测试,Remotion 核心现在的测试覆盖率已经超过 80%。感谢 Tobias Boner、Calvin Falter 和 Jonas Brunner 持续进行大规模的测试倡议!
我们现在还跨不同的 Node 版本(12、14 和 16)、npm 版本(v6 和 v7)以及 FFMPEG 版本(4.1 和 4.4)进行测试,除了在 3 个不同的操作系统上进行测试,以便我们可以自信地快速发布新功能。
对于贡献者,我们现在有一个 [TESTING.md](https://github.com/remotion-dev/remotion/blob/main/TESTING.md) 文件。
## 其他
- 您现在可以按 <kbd>Shift+Right Arrow</kbd> 键在时间轴中向前跳转 1 秒,按 <kbd>Shift+Left Arrow</kbd> 键向后跳转 1 秒。
- `npm init video` 现在将使用 NPM 设置一个 Remotion 项目,`yarn create video` 将使用 Yarn 设置一个项目。
- Node 16 和 NPM 7 现在得到更好的支持,安装和执行过程中不会显示任何警告。
- 修复了几个音频渲染问题:[#292](https://github.com/remotion-dev/remotion/issues/292) [#293](https://github.com/remotion-dev/remotion/issues/293) [#320](https://github.com/remotion-dev/remotion/issues/320)
- 当编辑器中出现更新横幅时,您现在可以单击以复制命令。
- 您现在可以将 React 的 `ref` 传递给 `<Audio/>` 和 `<Video />` 标签。
- 我们改进了 CLI 输出!您喜欢吗?
- 编辑器中的预览大小选项现在是持久的,感谢 [Oluwatobiju Judah](https://github.com/Tobijudah)!
- 在编辑器中,默认情况下启用了透明度切换。

remotion-2-0

· 11 min read

这是我们迄今为止最大、最好的版本 - 今天我们将发布许多令人惊叹的、备受期待的功能!

音频支持

我们很高兴地提供了具有灵活 API 的音频支持!

您可以将一个或多个音轨导入到您的项目中,对其进行裁剪、修剪和对齐。可以控制整个音轨的音量,或者您可以逐帧控制它,以创建淡入淡出效果等等。应用您的 React 思维方式 - Remotion 不关心您如何渲染音频标签,只要它在那里即可。我们告诉 FFMPEG 如何混合音频,就像您在浏览器预览中听到的那样,这个机制非常复杂,构建起来具有挑战性 - 我们为结果感到非常自豪!

音频可视化

通过新引入的音频可视化 API,您可以使您的视觉效果根据音频的频率做出反应。

您需要的是新的 getAudioData()visualizeAudio() API,这些 API 已经发布在自己的包中

在文档中阅读更多关于音频可视化的内容,或观看示例视频(源代码可以在这里找到)。

导出为 MP3、AAC、WAV

现在您还可以完全省略输出中的视频,只输出音频文件。是的,Remotion 也可以用作音频编辑程序!通过使用 --codec 标志传递 mp3aacwav 作为编解码器在您的配置文件中设置编解码器

@remotion/media-utils

这是一个新的辅助包,其中包含一些处理音频的有用函数。除了音频可视化之外,您还可以例如测量音频或视频源的持续时间,这对于使合成持续时间动态化非常有用。包含的函数有 getAudioData(), getAudioDuration(), getVideoMetadata(), getWaveformPortion(), visualizeAudio()useAudioData()

除了最后一个之外,它们都与 Remotion 的概念完全独立,因此它们也可能非常适合您的其他非 Remotion 项目!这个包是 MIT 许可的,所以每个人都可以在不获取公司许可的情况下使用它。

丰富时间轴(实验性)

使用普通时间轴,您无法看到您在合成中放置的所有媒体的完整情况。原因是您看到的可视化是基于当前播放头位置渲染的内容。

引入一个新的时间轴模式:丰富时间轴 将渲染除当前帧之外的其他帧,以收集足够的信息来可视化完整的时间轴。 通常不会渲染的序列,因为播放头不在序列的时间范围内,将会出现,因为 Remotion 在序列可见的时间进行额外渲染。

默认情况下,丰富时间轴 功能是禁用的,但如果反馈良好,将会默认启用。您可以通过点击具有三条线图标的图标在丰富时间轴和简单时间轴之间切换。试一试,然后告诉我们您的想法!

ESBuild 加载器

html
<div>
<video width="100%" height="100%" controls playsInline autoPlay muted loop>
<source src="/img/esbuild.mp4" type="video/mp4" />
</video>
</div>
html
<div>
<video width="100%" height="100%" controls playsInline autoPlay muted loop>
<source src="/img/esbuild.mp4" type="video/mp4" />
</video>
</div>

使用 esbuild-loader 默认替换了使用 babel-loader 对 Javascript 和 Typescript 进行传统转译。

这将大大加快捆绑速度 - 希望您不会注意到任何其他差异!如果出于某种原因需要返回到以前的行为,您可以覆盖 Webpack 配置 - 我们发布了一个助手,使其变得容易

html
<div>
<video width="100%" height="100%" controls playsInline autoPlay muted loop>
<source src="/img/esbuild-loader.webm" type="video/webm" />
</video>
</div>
html
<div>
<video width="100%" height="100%" controls playsInline autoPlay muted loop>
<source src="/img/esbuild-loader.webm" type="video/webm" />
</video>
</div>

Webpack 缓存

尽管现在使用 ESBuild 进行转译,但仍然使用 Webpack 进行捆绑。我们依赖于 Webpack 的功能,如热模块替换、资源导入、其强大的加载器生态系统以及现在的缓存功能。

当您第一次运行 npm run build 时,您将收到一个正在构建缓存的消息。从第二次开始,即使更改代码,捆绑速度也会快得多。您不应该经常这样做,但您可以选择禁用缓存

部分视频渲染 + 静帧

想要渲染部分视频或缩略图?您可以使用 Remotion 2.0 完成。我们引入了一个新的 CLI 标志 --frames 来渲染视频的子集或静帧。

--frames=0-9(选择前 10 帧)或 --frames=50(渲染第 51 帧的静帧)。

了解更多关于 --frames CLI 选项的信息。

@remotion/gif 组件

html
<div>
<video width="100%" height="100%" controls playsInline autoPlay muted loop>
<source src="/img/gif.mp4" type="video/mp4" />
</video>
</div>
html
<div>
<video width="100%" height="100%" controls playsInline autoPlay muted loop>
<source src="/img/gif.mp4" type="video/mp4" />
</video>
</div>

@remotion/gif 包中发布了一个新的 GIF 组件。<Gif /> 组件允许加载本地或远程 GIF,并与 Remotion 的 useCurrentFrame() 同步。为此,它使用 WebAssembly 解析 GIF - 基本上是非常酷的技术!非常感谢 @jeetiss 贡献了这个新组件。

[在此处了解有关 GIF 组件的更多信息](/docs/gif).
## 可调整大小的编辑器面板
<div>
<video width="100%" height="100%" controls playsInline autoPlay muted loop>
<source src="/img/resizeable.mp4" type="video/mp4" />
</video>
</div>
在编辑器中,您现在可以调整时间轴和左侧边栏的大小。非常感谢 [Arthur Denner](https://github.com/arthurdenner) 为这个出色的贡献!
## interpolate()
`interpolate()` 现在支持长度大于 2 的数组。对于许多场景非常有用 - 例如,您可以使用一行代码创建组合的淡入/淡出过渡。
```tsx
const opacity = interpolate(
frame,
[0, 10, durationInFrames - 10, durationInFrames],
[0, 1, 1, 0],
);
[在此处了解有关 GIF 组件的更多信息](/docs/gif).
## 可调整大小的编辑器面板
<div>
<video width="100%" height="100%" controls playsInline autoPlay muted loop>
<source src="/img/resizeable.mp4" type="video/mp4" />
</video>
</div>
在编辑器中,您现在可以调整时间轴和左侧边栏的大小。非常感谢 [Arthur Denner](https://github.com/arthurdenner) 为这个出色的贡献!
## interpolate()
`interpolate()` 现在支持长度大于 2 的数组。对于许多场景非常有用 - 例如,您可以使用一行代码创建组合的淡入/淡出过渡。
```tsx
const opacity = interpolate(
frame,
[0, 10, durationInFrames - 10, durationInFrames],
[0, 1, 1, 0],
);

添加了 170 多个测试

虽然不是严格意义上的新功能,但这绝对值得一提。

Calvin FalterJonas BrunnerTobias Boner 将 Remotion 作为他们大学研讨会的项目,并贡献了超过 100 个测试,加强了代码并解决了边缘情况。

@cnnr 贡献了一个非常酷的端到端测试,测试了 Remotion 的视频寻址,并通过匹配每一帧中的颜色确保其帧精确。

其余添加的测试正在测试音频渲染的棘手部分。感谢测试驱动开发,我们能够捕捉到回归并发布非常稳固的音频支持。

总结:在 Remotion 1.5.4 中,我们总共有 43 个测试,在 Remotion 2.0 中,我们添加了总共 174 个测试,总共达到 217 个。

<Video/><Audio/> 现在具有 startFromendAt 属性

这些新属性使得裁剪视频的开始或结束更加容易。这是使用序列实现的,之前也是可能的,但这是一个方便的简写。

修复:帧寻址

在 Remotion 1.x 中,<Video/> 不会始终与渲染期间 Remotion 的时间完全同步。现在已经修复,并通过扫描输出帧的颜色进行验证 - 但并非以最有效的方式。欢迎继续改进。

修复:导入大视频时的超时问题

将大小相当大的文件导入到您的 webpack 包中会导致渲染缓慢和超时(问题在大约 40MB 处开始)。现在通过更换依赖项并确保整个堆栈良好支持 HTTP 范围标头来解决此问题。现在,如果您寻找视频,只会从文件系统加载必要的部分,而不是读取整个文件。

破坏性更改和升级

我们借此主要发布的机会引入了一些我们认为对 Remotion 未来有益的破坏性更改。请花点时间阅读 2.0 迁移指南,看看您是否受到影响。

未来

现在已经实现了在 React 中制作视频的大部分核心功能。 这使我们有时间专注于改进其周围的所有领域 - 我们谈论更好的文档、开发人员体验、示例、在 Remotion 之上的抽象、提高 Remotion 的速度和可靠性。

此外,我们希望提供一种在传统 Web 应用程序中嵌入 Remotion 组合的方法,并使服务器端渲染更加简单 - 敬请关注!

公司授权价格公布

· One min read
Jonny Burger
独立开发者

我们取消了“联系我们获取价格”的政策,并公布了 Remotion 的定价。请访问 companies.remotion.dev 查看!

Remotion Pricing

这是一个新平台,您可以直接购买 Remotion 授权,获取发票,升级/降级或取消,无需与我们联系。

当然,如果您需要咨询,仍然可以给我们发送电子邮件至 hi@remotion.dev

remotion-1-5

· 4 min read

这个版本没有引入大的新功能,但解决了一些常见问题。

无需下载 Chromium

直到现在,每次运行 yarn create video 时都会安装一个 Chromium 二进制文件,这很慢,占用了大量空间(根据操作系统在 170-280MB 之间)。更糟糕的是,这些二进制文件不包含播放 MP4 视频所需的编解码器,这意味着如果您想嵌入一个 MP4 视频,您必须先将其转换为 WebM。

现在 Remotion 将尝试在您的计算机上查找现有的 Chrome 安装,如果找到,将使用它并跳过下载。如果找不到,您可以使用 setBrowserExecutable() 选项或 --browser-executable 命令行标志指定路径。

如果您在一个既没有安装 Chrome 也没有安装 Chromium 的计算机上运行 Remotion,Remotion 仍将从互联网下载一个版本。但是,下载仅在您第一次调用 npm run build 时发生,因此您不必等太久就可以开始尝试。

改进的 Apple Silicon 和 WSL 支持

Apple Silicon 支持是 Puppeteer 重构的另一个好处,因为以前的安装会失败,因为没有为 Apple Silicon 架构提供 Chromium 二进制文件。现在 Remotion 将尝试使用本地 Chrome 安装,这种情况发生的可能性要小得多。

在 Windows Subsystem for Linux 上,缺少一个标志会导致 Remotion 在渲染过程中卡住。这个问题现在已经修复。Linux 用户还需要安装一些额外的库,现在已经有文档记录

更流畅的时间轴

为什么您的 30 FPS 时间轴只以 28.7FPS 播放?原来这是一个由 yuta0801 调查并修复的 bug!现在预览期间的播放更加流畅,FPS 计数器更有可能显示与您期望的 FPS 匹配的数字。

渲染框架失败会导致严重错误

如果由于某种原因无法渲染框架(例如调用 delayRender() 并且永远无法解锁),现在将会停止渲染过程。之前会收到错误消息,但 Remotion 会继续尝试并继续失败。

渲染将在本地服务器上进行

以前在渲染过程中,框架会通过 file:// 协议打开并进行截图。现在框架将在 http://localhost:3000 上提供服务(如果端口不可用,将尝试 3001、3002 等),这与预览中的行为相同。

现在 API 可以简单地在其 CORS 配置中将本地主机域名列入白名单,您可以更轻松地使用这些 API 将数据输入到您的视频中。

新教程:编程式 Instagram 故事

如果您错过了,我发布了一个新教程,展示了如何使用动态内容编程式地创建 Instagram 故事的工作流程。您可以在此观看。

升级

如往常一样,您可以通过在您的 Remotion 项目中运行 npm run upgrade 来升级到最新版本。

remotion-1-4

· 9 min read
markdown
---
slug: 1-4
title: Remotion 1.4
author: Jonny Burger
author_title: 独立开发者
author_url: https://github.com/JonnyBurger
author_image_url: https://avatars2.githubusercontent.com/u/1629785?s=460&u=12eb94da6070d00fc924761ce06e3a428d01b7e9&v=4
---
import {TransparentVideoDemo} from '../components/TransparentVideoDemo';
欢迎阅读 Remotion 1.4 的发布说明!这是一个重要的版本,增加了对更多用例的支持,使 Remotion 更加稳定、直观和强大。
## 支持 HEVC 和 WebM 编解码器
现在不仅支持 H.264,您还可以将视频编码为 H.265(HEVC)或 WebM(使用 VP8 或 VP9 编解码器)。这些编解码器将导致更小的文件大小,但也有一些权衡。为了帮助您决定使用哪种编解码器,现在文档中有一个 [编码指南](/docs/encoding)。还请参阅[配置文件中更改编解码器](/docs/config#setcodec)以及[CLI 中的编解码器](/docs/cli/render#--jpeg-quality)的文档。
## 透明视频
您知道 Chrome 和 Firefox 支持带 Alpha 通道的视频吗?播放视频并单击下面的按钮以动态更改背景。
<TransparentVideoDemo />
Remotion 现在具有足够的可配置性,使您能够渲染透明视频。有一个[新的文档页面](/docs/transparent-videos)介绍了这一点,还为您提供了如何为不受支持的浏览器渲染备用视频的指导。
## 新的 `random()` API
假设您想在视频中渲染 100 个随机粒子。一个常见的错误是生成随机值并将其存储在状态中。以下是 Remotion 中的反模式:
```tsx {5-6}
export const MyComp = () => {
// ⚠️ Bug! Random values will change during render
const [particles] = useState(() => {
return new Array(100).fill(true).map(() => ({
x: Math.random(),
y: Math.random(),
}));
});
};
markdown
---
slug: 1-4
title: Remotion 1.4
author: Jonny Burger
author_title: 独立开发者
author_url: https://github.com/JonnyBurger
author_image_url: https://avatars2.githubusercontent.com/u/1629785?s=460&u=12eb94da6070d00fc924761ce06e3a428d01b7e9&v=4
---
import {TransparentVideoDemo} from '../components/TransparentVideoDemo';
欢迎阅读 Remotion 1.4 的发布说明!这是一个重要的版本,增加了对更多用例的支持,使 Remotion 更加稳定、直观和强大。
## 支持 HEVC 和 WebM 编解码器
现在不仅支持 H.264,您还可以将视频编码为 H.265(HEVC)或 WebM(使用 VP8 或 VP9 编解码器)。这些编解码器将导致更小的文件大小,但也有一些权衡。为了帮助您决定使用哪种编解码器,现在文档中有一个 [编码指南](/docs/encoding)。还请参阅[配置文件中更改编解码器](/docs/config#setcodec)以及[CLI 中的编解码器](/docs/cli/render#--jpeg-quality)的文档。
## 透明视频
您知道 Chrome 和 Firefox 支持带 Alpha 通道的视频吗?播放视频并单击下面的按钮以动态更改背景。
<TransparentVideoDemo />
Remotion 现在具有足够的可配置性,使您能够渲染透明视频。有一个[新的文档页面](/docs/transparent-videos)介绍了这一点,还为您提供了如何为不受支持的浏览器渲染备用视频的指导。
## 新的 `random()` API
假设您想在视频中渲染 100 个随机粒子。一个常见的错误是生成随机值并将其存储在状态中。以下是 Remotion 中的反模式:
```tsx {5-6}
export const MyComp = () => {
// ⚠️ Bug! Random values will change during render
const [particles] = useState(() => {
return new Array(100).fill(true).map(() => ({
x: Math.random(),
y: Math.random(),
}));
});
};

虽然在预览视频时这样做可以工作,但在渲染期间,随机数将在帧之间更改。这是因为 Remotion 启动了多个 Chrome 实例,每个实例中的随机数将不同。

为了帮助您避免这种错误,现在有一个新的 ESLint 规则,当您使用 Math.random() 时会发出警告。而不是使用它,您可以使用新的 random() API。它将接受一个 seed 参数并输出一个介于 0 和 1 之间的数字。它的作用是:只要传递相同的种子,您将获得相同的输出!这样在执行多线程渲染时就不会出现意外效果。

```tsx twoslash {7-8}
import {useState} from 'react';
import {random} from 'remotion';
export const MyComp = () => {
// ✅ Pseudo-random values that will be same across threads
const [particles] = useState(() => {
return new Array(100).fill(true).map((_, idx) => ({
x: random(`x-${idx}`),
y: random(`y-${idx}`),
}));
});
};
```tsx twoslash {7-8}
import {useState} from 'react';
import {random} from 'remotion';
export const MyComp = () => {
// ✅ Pseudo-random values that will be same across threads
const [particles] = useState(() => {
return new Array(100).fill(true).map((_, idx) => ({
x: random(`x-${idx}`),
y: random(`y-${idx}`),
}));
});
};

想了解更多吗?阅读有关使用随机性的新文档页面。

更多配置选项

已添加了几个新的配置选项作为 CLI 标志、配置文件条目和 SSR API:

  • setCrf() 控制输出文件的质量和文件大小之间的权衡。
  • setQuality() 允许您控制渲染帧的 JPEG 质量。
  • setCodec() 允许您在 4 种不同的编解码器之间进行选择(如上所述)。
  • setImageSequence() 允许您跳过拼接过程,仅输出图像序列。
  • setImageFormat() 允许您明确选择 PNG 或 JPEG 作为渲染帧的格式。
  • setPixelFormat() 有一个新的接受值,yuva420p,这对于透明视频是必要的。

添加了 setImageSequence()setImageFormat() 以及 setCodec() 使得先前的配置选项 setOutputFormat()--png 已过时。虽然它们仍然有效,但我们鼓励您使用新的配置选项,这些选项更加细粒度 - 例如,现在您可以渲染 JPEG 序列。

编辑器中的键盘控制

感谢 Arthur Denner 提交的精彩拉取请求,编辑器中的键盘导航得到了很大改善!强烈建议阅读此 PR,因为它很有见地,让您意识到使网站支持键盘导航并不难。

keyboard-support.gif

拼接帧的进度条

如果新添加的编解码器比默认的 H.264 慢得多,不要感到惊讶。这是正常的。但至少现在您可以随时检查渲染的进度!

![stitching-progress.png](/img/stitching-progress.png)
## `<Sequence>` 新增 `layout` 属性
有些人正确指出 `<Sequence>` 组件会绝对定位其子元素,并且没有办法退出这种行为。虽然由于向后兼容性我们现在无法更改这一点,但现在你可以传递 `layout="none"` 作为一个属性,以退出 `<Sequence>` 的任何布局影响。
## 异步确定合成元数据
在这个版本中有一个小的破坏性变化 - `delayRender` 在 'evaluation' 阶段起作用。这是 Remotion 分析您的项目并确定所有合成并进行一些验证的阶段。注意 `delayRender()` 调用在组件外部,因为它们现在可能会阻止评估阶段,因为在该阶段不会渲染任何组件。
好处是现在您的合成可以接收异步获取的数据。例如,现在可以实现以下内容:
```tsx
export const RemotionVideo: React.FC = () => {
const [videoLength, setVideoLength] = useState(null)
useEffect(() => {
const handle = delayRender();
determineVideoLength()
.then((duration) => {
setVideoLength(duration)
continueRender(handle)
})
.catch(err => /**/)
}, [])
if (videoLength === null) {
return null;
}
return (
<>
<Composition
id="HelloWorld"
component={HelloWorld}
durationInFrames={videoLength}
fps={30}
width={1920}
height={1080}
/>
</>
)
}
![stitching-progress.png](/img/stitching-progress.png)
## `<Sequence>` 新增 `layout` 属性
有些人正确指出 `<Sequence>` 组件会绝对定位其子元素,并且没有办法退出这种行为。虽然由于向后兼容性我们现在无法更改这一点,但现在你可以传递 `layout="none"` 作为一个属性,以退出 `<Sequence>` 的任何布局影响。
## 异步确定合成元数据
在这个版本中有一个小的破坏性变化 - `delayRender` 在 'evaluation' 阶段起作用。这是 Remotion 分析您的项目并确定所有合成并进行一些验证的阶段。注意 `delayRender()` 调用在组件外部,因为它们现在可能会阻止评估阶段,因为在该阶段不会渲染任何组件。
好处是现在您的合成可以接收异步获取的数据。例如,现在可以实现以下内容:
```tsx
export const RemotionVideo: React.FC = () => {
const [videoLength, setVideoLength] = useState(null)
useEffect(() => {
const handle = delayRender();
determineVideoLength()
.then((duration) => {
setVideoLength(duration)
continueRender(handle)
})
.catch(err => /**/)
}, [])
if (videoLength === null) {
return null;
}
return (
<>
<Composition
id="HelloWorld"
component={HelloWorld}
durationInFrames={videoLength}
fps={30}
width={1920}
height={1080}
/>
</>
)
}

敬请期待一个新的 API,它将允许您测量视频和音频时长!

Windows、macOS 和 Ubuntu 的端到端测试

虽然 Remotion 主要在 macOS 上开发,但其他操作系统不应该有次优的体验或出现错误。虽然它不能取代手动测试,但有助于 现在有一些用于渲染视频的端到端测试,测试套件现在在所有 3 个操作系统上运行。未来,我将添加更多测试,也鼓励贡献者这样做。

错误的资源导入的 ESLint 规则

在 Remotion 中,您不应该将 src 指定为文件路径字符串,而应导入资源。为了帮助您避免犯这个错误,有一个新的 ESLint 规则:

tsx
import {Img} from 'remotion';
import hi from './hi.png';
// ✅ Correct: Using an import statement
<Img src={hi} />
// ⚠️ Warning since 1.4: Import the asset instead
<Img src="./hi.png"/>
tsx
import {Img} from 'remotion';
import hi from './hi.png';
// ✅ Correct: Using an import statement
<Img src={hi} />
// ⚠️ Warning since 1.4: Import the asset instead
<Img src="./hi.png"/>

支付顶级贡献者

由于 Remotion 将通过向大公司出售许可证来赚钱,给予贡献者他们应得的份额是公平的!到目前为止,我已经向两位顶级贡献者提供了报酬,以补偿他们迄今为止花费的时间和未来潜在的工作。令人高兴的是,他们都接受了!

各种改进

接下来...

一些很棒的拉取请求已经到来,最引人注目的是添加了音频支持! 我们还在努力允许您自定义 Puppeteer 参数,并通过不下载 Chromium 的副本来加快安装过程。敬请期待更多重大改进的到来。

Remotion 1.3

· 5 min read
Jonny Burger
独立开发者

距离初始发布仅1周,Remotion 1.3来了!仅仅7天,我们合并了超过40个拉取请求 - 简直太神奇了!让我们看看这个版本的变化。

速度提升2倍 - 再次!

2天前,渲染时间减半,而在这个版本中,我们又将其减半了!查看这个Spotify Wrapped示例的基准测试:

Remotion 1.1

hyperfine --min-runs 5 'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
Time (mean ± σ): 98.972 s ± 0.650 s [User: 123.329 s, System: 10.103 s]
Range (min … max): 97.951 s … 99.540 s 5 runs
hyperfine --min-runs 5 'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
Time (mean ± σ): 98.972 s ± 0.650 s [User: 123.329 s, System: 10.103 s]
Range (min … max): 97.951 s … 99.540 s 5 runs

Remotion 1.3

hyperfine --min-runs 5 'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
Time (mean ± σ): 17.921 s ± 0.224 s [User: 36.492 s, System: 3.482 s]
Range (min … max): 17.650 s … 18.264 s 5 runs
hyperfine --min-runs 5 'npm run build -- --overwrite --concurrency=16'
Benchmark #1: npm run build -- --overwrite --concurrency=16
Time (mean ± σ): 17.921 s ± 0.224 s [User: 36.492 s, System: 3.482 s]
Range (min … max): 17.650 s … 18.264 s 5 runs

从98秒到18秒 - 快了5.5倍!同时,我们达到了一个重要的里程碑:这个19秒长的720p视频比实时渲染速度更快。尽管我的电脑比大多数电脑更快(8核Intel i9-9900K芯片),但仍然非常令人印象深刻!

我们通过各种Puppeteer渲染管道优化实现了这一性能提升。特别感谢jeetiss实现了一项复杂的性能优化,不再需要为每一帧重新加载页面。

支持纯JavaScript

我的目标是强制每个人都使用Typescript - 但我失败了。现在已经添加了对纯JavaScript的支持!查看这里如何启用它。请小心操作 🙈

类型安全的配置文件

许多您可以通过CLI标志传递的选项,现在也可以通过在存储库中添加remotion.config.ts文件来添加。例如,如果您想将并发性增加到您拥有的线程数量,并且永远不想写--overwrite,您可以将以下内容添加到配置文件中:

tsx
import os from "os";
import { Config } from "remotion";
Config.Rendering.setConcurrency(os.cpus().length);
Config.Output.setOverwriteOutput(true);
tsx
import os from "os";
import { Config } from "remotion";
Config.Rendering.setConcurrency(os.cpus().length);
Config.Output.setOverwriteOutput(true);

您可以在此页面上查看所有选项。使用Typescript创建配置文件的目标是提供自动完成功能,轻松突出显示已弃用的选项,并使未来更改选项时更容易展示如何迁移。

缓动 API

尽管存在缓动 API,但它是未记录的。了解可用的Easing 方法以及如何与interpolate()一起使用!

tsx
import { Easing, interpolate } from "remotion";
interpolate(frame, [0, 100], {
easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
tsx
import { Easing, interpolate } from "remotion";
interpolate(frame, [0, 100], {
easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});

一些小事

如果您错过了

添加了另一个示例 - Spotify Wrapped! 这是一个完全动态的示例,您可以使用命令行标志替换所有数据。YouTube 上有一个 2 小时的教程视频,源代码在 GitHub 上。

Please paste the Markdown content you need to be translated into Chinese.

Remotion 1.2

· 3 min read
Jonny Burger
独立开发者

您已经测试了 Remotion 并提供了大量反馈!多亏了这些反馈,这个版本的 Remotion 得到了极大的改进 🎉

渲染时间减半!

事实证明,将每一帧渲染为 JPEG 比将其渲染为 PNG 要快得多,并且在质量上没有明显差异。通过这个技巧,一个示例视频的“渲染帧...”时间从 14 秒减少到 6.5 秒!这是原来的两倍速。

现在渲染过程基于 JPEG,新增了一个 --quality 标志到命令行。对于服务器端渲染,您可以传入一个新的 imageFormat 选项。 如果您渲染为 PNG 序列,Remotion 当然仍会提供 PNG。

目标是使渲染速度更快,寻找进一步的优化将是一个非常有趣的任务!

Windows 支持

Windows 支持非常重要(就像 PHP 一样)。所有阻止正确安装 Windows 的 bug 现在都已修复。此外,我现在有了一个合适的 Windows 设置,所以从现在开始 Remotion 也将在 Windows 上进行测试!

Discord 社区

我们现在有了一个 Discord!立即加入并聊一聊 Remotion!

现在提供许可证

公司许可证的条款现在已经制定出来,并且已经设置了一个带有 Stripe 的计费系统。联系我了解价格!

路线图

已经设置了一个 GitHub 项目板,旨在指示下一个优先事项。快去看看吧!

其他

Please paste the Markdown content you need to be translated into Chinese.