Skip to main content

#t= 媒体片段

Remotion 默认会将 Media fragment 哈希添加到视频 URL。

🌐 Remotion by default adds Media fragment hashes to video URLs.

行为​

🌐 Behavior

例如，以下 Remotion 代码：

🌐 For example, the following Remotion code:

MyComp.tsx
import {Sequence, OffthreadVideo, useVideoConfig} from 'remotion';

export const MyComp: React.FC = () => {
  const {fps} = useVideoConfig();

  return (
    <Sequence from={2 * fps} durationInFrames={4 * fps}>
      <OffthreadVideo src="https://example.com/bbb.mp4" />
    </Sequence>
  );
};

导致以下 <video> 标签被挂载：

🌐 results in the following <video> tag being mounted:

<video src="https://example.com/bbb.mp4#t=2.0,4.0" />

这指示浏览器仅加载视频中从00:02到00:04的部分。

🌐 This instructs browsers to only load the section of 00:02 to 00:04 of the video.

优点​

🌐 Upsides

它可以提高播放性能并减少带宽使用。

🌐 It improves playback performance and reduces bandwidth usage.

在 Safari 上，这些提示更为重要。我们发现没有这些提示，Safari 视频在移动设备上的表现会很差。

🌐 On Safari, these hints have higher importance. We find that without these hints, Safari videos behave badly on mobile.

如何禁用媒体片段提示​

🌐 How to disable media fragment hints

你可以通过附加自己的哈希来禁用 Remotion 添加媒体片段：

🌐 You can disable Remotion appending media fragments by appending your own hash:

MyComp.tsx
import {Sequence, OffthreadVideo, useVideoConfig} from 'remotion';

export const MyComp: React.FC = () => {
  const {fps} = useVideoConfig();

  return (
    <Sequence from={2 * fps} durationInFrames={4 * fps}>
      <OffthreadVideo src="https://example.com/bbb.mp4#disable" />
    </Sequence>
  );
};

何时禁用媒体片段提示​

🌐 When to disable media fragment hints

如果你的 <Sequence> 的变化值随时间改变，媒体片段也会随之改变。每当它们改变时，浏览器会将其视为新的来源并重新加载视频。

🌐 If your <Sequence>'s change value over time, the media fragments will change too.
Anytime they change, the browser considers this a new source and re-loads the video.

有一些有效的场景，我们建议禁用媒体片段提示：

🌐 There are valid scenarios where we recommend disabling the media fragment hints:

  • 动态更改 <Sequence> 的 from 和 durationInFrames 值
  • 动态更改 <Html5Video> 或 <OffthreadVideo> 的 trimBefore 和 trimAfter 值
  • 随时间改变 <Html5Video>、<OffthreadVideo> 或 <Video> 的 playbackRate。

通常你不会这样做，但也有例外，比如：随着时间改变视频的速度

🌐 Normally you would not do this, but there are exceptions, like: Changing the speed of a video over time

推荐​

🌐 Recommendation

将自动媒体片段提示用作默认设置，因为它们有助于播放性能。如果你发现有需要禁用媒体片段提示的有效场景，也可以这样做。

🌐 Use the automatic media fragment hints as a default because they are helpful with playback performance.
If you find a valid scenario where you need to disable the media fragment hints, you can do so.

如果播放性能下降，你也可以向 URL 提供自己的媒体片段提示。

🌐 If the playback performance suffers, you can also provide your own media fragment hint to the URL.

Last updated on