Skip to main content

从 @remotion/media 回退到 <OffthreadVideo> 或 <Html5Audio>

有时，媒体文件无法使用 @remotion/media 的 <Video> 和 <Audio> 标签嵌入。
在这种情况下，会尝试回退到 remotion 包中的 <OffthreadVideo> 或 <Html5Audio> 。

🌐 Sometimes, a media file cannot be embedded using @remotion/media's <Video> and <Audio> tags.
In such cases, a fallback to <OffthreadVideo> or <Html5Audio> from the remotion package is attempted.

尝试回退时​

🌐 When a fallback is attempted

以下是一些 @remotion/media 可能从 remotion 回退到 <OffthreadVideo> 或 <Html5Audio> 的情况：

🌐 Here are some cases where @remotion/media may fall back to <OffthreadVideo> or <Html5Audio> from remotion:

  • 由于CORS 限制，资源加载失败
  • 该容器格式不被 Mediabunny 支持
  • 该编解码器无法被 WebCodecs 解码（例如，在渲染期间的 H.265 流）
  • 该视频具有 alpha 通道，而浏览器不支持解码 alpha 通道所需的 WebGL。无头浏览器的默认配置未启用 WebGL。

观察回退发生的时间​

🌐 Observing when a fallback happens

如果 @remotion/media 回退到另一个标签，则在渲染时会记录一条警告信息：

🌐 If @remotion/media falls back to another tag, then a warning message will be logged in the render:

Cannot decode /public/video-h265.mp4, falling back to <OffthreadVideo>

如果你在一个日志无法立即看到的环境中进行渲染（例如 Lambda），请通过查看日志（例如 CloudWatch）来观察是否发生了回退。

🌐 If you are rendering on an environment where the logs are not immediately visible (e.g. Lambda), observe whether a fallback has happened by visiting the logs (e.g. CloudWatch).

防止回退发生​

🌐 Preventing a fallback from happening

为了防止 <Video> 回退到 <OffthreadVideo>，请设置 disallowFallbackToOffthreadVideo 属性：

🌐 To prevent <Video> from falling back to <OffthreadVideo>, set the disallowFallbackToOffthreadVideo prop:

No fallback to OffthreadVideo
import {Video} from '@remotion/media';

export const MyComp: React.FC = () => {
  return <Video src="https://remotion.media/video.mp4" disallowFallbackToOffthreadVideo />;
};

为了防止 <Audio> 回退到 <Html5Audio> 从 remotion，请设置 disallowFallbackToHtml5Audio 属性：

🌐 To prevent <Audio> from falling back to <Html5Audio> from remotion, set the disallowFallbackToHtml5Audio prop:

No fallback to HTML5 audio tag
import {Audio} from '@remotion/media';

export const MyComp: React.FC = () => {
  return <Audio src="https://remotion.media/audio.mp3" disallowFallbackToHtml5Audio />;
};

如果回退被阻止，渲染将被取消。

🌐 If a fallback is prevented, the render will be cancelled instead.

loop 属性在回退期间的行为​

🌐 Behavior of the loop prop during fallback

<Video> 的 loop 属性会根据环境的不同而有所不同地处理：

🌐 The loop prop of <Video> is handled differently depending on the environment:

在预览期间，回退使用 <Html5Video>，它原生支持 loop 属性。循环按预期工作。

在渲染过程中，<OffthreadVideo> 本身不支持循环。为了解决这个问题，@remotion/media 尝试确定视频的持续时间，并自动将 <OffthreadVideo> 封装在 <Loop> 组件中。

  • 在大多数情况下，即使不支持编解码器，也可以从媒体容器中提取持续时间。
  • 如果无法确定持续时间（例如，由于 CORS 问题 或损坏的容器），渲染将因错误而失败。

为了确保在渲染过程中循环可靠运行，请确保：

🌐 To ensure looping works reliably during rendering, make sure:

  • 该视频文件有效且未损坏
  • 没有CORS 问题阻止读取该文件

在客户端渲染中无法回退​

🌐 Fallback is not possible in client-side rendering

在使用 @remotion/web-renderer 进行客户端渲染时，无法回退到 <OffthreadVideo> 或 <Html5Audio>。

🌐 When using @remotion/web-renderer for client-side rendering, fallback to <OffthreadVideo> or <Html5Audio> is not possible.

这是因为这些回退组件需要浏览器中不可用的服务器端功能。

🌐 This is because these fallback components require server-side capabilities that are not available in the browser.

如果在客户端渲染期间无法使用 @remotion/media 渲染媒体文件，渲染将失败，并显示描述问题的错误消息。

🌐 If a media file cannot be rendered using @remotion/media during client-side rendering, the render will fail with an error message describing the issue.

Last updated on