Skip to main content

<Video> vs. <OffthreadVideo>

我们提供两个组件来包含其他视频在您的视频中：<Video /> 和 <OffthreadVideo />。
本页面提供了一个比较，以帮助您决定使用哪个标签。

<OffthreadVideo />​

info

尽可能使用 <OffthreadVideo />。

一种更复杂的嵌入视频的方式，具有以下特点：

  • 预览期间： 渲染一个 HTML5 <video> 标签。
  • 渲染时： 在浏览器外提取确切的帧并在 <Img> 标签中显示。

优点

✅   可以同时显示更多视频，因为 Chrome 不会应用节流。
✅   输出视频中不会出现闪烁或重复帧。
✅   支持更多编解码器，如 ProRes（仅在渲染时）。
✅   通常渲染速度更快。

缺点

⛔   需要完全下载视频才能渲染帧。
⛔   无法附加引用到此元素。
⛔   需要更多工作来循环视频。查看：循环一个 <Offthread> 视频。
⛔   仅在设置了 transparent 时才支持透明视频，这会稍微慢一些。

<Video />​

基于原生 HTML5 <video> 元素，因此行为类似于它。

优点

✅   可以渲染视频而无需完全下载（如果不传递 muted 属性，则视频仍将完全下载以提取其音频）。
✅   您可以附加引用到 <video> 元素。

缺点

⛔   支持的编解码器较少。
⛔   如果页面过重，Chrome 可能会对视频标签进行节流。
⛔   如果同时渲染太多视频标签，可能会发生超时。
⛔   如果输入视频帧速率与输出帧速率不匹配，则输出中可能会出现一些重复帧。
⛔   需要使用具有专有编解码器的 Google Chrome 构建。

I'm ready to translate. Please paste the Markdown content for the Developer documentation.