remotion-1-4

February 26, 2021 · 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}`),
    }));
  });
};

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

编辑器中的键盘控制

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

拼接帧的进度条

如果新添加的编解码器比默认的 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 的副本来加快安装过程。敬请期待更多重大改进的到来。

更多配置选项​

编辑器中的键盘控制​

拼接帧的进度条​

Windows、macOS 和 Ubuntu 的端到端测试​

错误的资源导入的 ESLint 规则​

支付顶级贡献者​

各种改进​

接下来...​

更多配置选项