跳切

有时候你可能想实现“跳切”，以跳过视频的某些部分（例如剪掉“嗯”的部分）。你需要考虑以下事项：

🌐 Sometimes you want to implement a "jump cut" to skip parts of a video (for example to cut out the "uhm"s).
You have the following considerations to make:

浏览器可能已经预加载了视频的未来一小部分（约1-2秒）。在这种情况下，复用相同的视频标签会很有用。

跳到较远的未来部分尚未加载。在这种情况下，不应复用视频标签，而应预先挂载第二个视频标签，以便它可以预加载。

如果跳转非常短（<0.45秒），由于acceptableTimeshiftInSeconds属性，Remotion可能不会执行跳转。你可能需要暂时降低该值。

note

这些考虑仅用于浏览器中的顺畅预览。
在渲染时，即使不遵循这些考虑，视频也将保持逐帧精确。

重复使用相同的视频标签

🌐 Re-using the same video tag

对于小跳转的情况

，重复使用相同的视频标签是合理的。
下面的代码片段展示了如何做到这一点。

在

的情况下，我们暂时禁用 acceptableTimeshiftInSeconds 属性，即使是微小的跳转也强制跳转。

import React, {useMemo} from 'react';
import {CalculateMetadataFunction, OffthreadVideo, staticFile, useCurrentFrame} from 'remotion';

const fps = 30;

type Section = {
  trimBefore: number;
  trimAfter: number;
};

export const SAMPLE_SECTIONS: Section[] = [
  {trimBefore: 0, trimAfter: 5 * fps},
  {
    trimBefore: 7 * fps,
    trimAfter: 10 * fps,
  },
  {
    trimBefore: 13 * fps,
    trimAfter: 18 * fps,
  },
];

type Props = {
  sections: Section[];
};

export const calculateMetadata: CalculateMetadataFunction<Props> = ({props}) => {
  const durationInFrames = props.sections.reduce((acc, section) => {
    return acc + section.trimAfter - section.trimBefore;
  }, 0);

  return {
    fps,
    durationInFrames,
  };
};

export const JumpCuts: React.FC<Props> = ({sections}) => {
  const frame = useCurrentFrame();

  const cut = useMemo(() => {
    let summedUpDurations = 0;
    for (const section of sections) {
      summedUpDurations += section.trimAfter - section.trimBefore;
      if (summedUpDurations > frame) {
        const trimBefore = section.trimAfter - summedUpDurations;
        const offset = section.trimBefore - frame - trimBefore;

        return {
          trimBefore,
          firstFrameOfSection: offset === 0,
        };
      }
    }

    return null;
  }, [frame, sections]);

  if (cut === null) {
    return null;
  }

  return (
    <OffthreadVideo
      pauseWhenBuffering
      trimBefore={cut.trimBefore}
      // Remotion will automatically add a time fragment to the end of the video URL
      // based on `trimBefore` and `trimAfter`. Opt out of this by adding one yourself.
      // https://www.remotion.dev/docs/media-fragments
      src={`${staticFile('time.mp4')}#t=0,`}
      // Force Remotion to seek when it jumps even just a tiny bit
      acceptableTimeShiftInSeconds={cut.firstFrameOfSection ? 0.000001 : undefined}
    />
  );
};

预先挂载第二个视频标签

🌐 Pre-mounting a second video tag

如果在

的情况下你要进行大跳跃，预先挂载第二个视频标签是有意义的。
请参阅按顺序播放视频了解如何操作。

另请参阅

🌐 See also

重复使用相同的视频标签​

预先挂载第二个视频标签​

另请参阅​

重复使用相同的视频标签

预先挂载第二个视频标签

另请参阅