Skip to main content

旋转视频

warning

我们正在逐步淘汰 Remotion WebCodecs，并转向 Mediabunny！

你可以使用 @remotion/webcodecs 包在浏览器中旋转视频，以修复方向错误的视频。

🌐 You can rotate a video in the browser using the @remotion/webcodecs package to fix a video that has a bad orientation.

💼 重要许可免责声明
This package is licensed under the Remotion License.
We consider a team of 4 or more people a "company".

For "companies": A Remotion Company license needs to be obtained to use this package.
In a future version of @remotion/webcodecs, this package will also require the purchase of a newly created "WebCodecs Conversion Seat". Get in touch with us if you are planning to use this package.

For individuals and teams up to 3: You can use this package for free.

This is a short, non-binding explanation of our license. See the License itself for more details.
🚧 不稳定的 API
This package is experimental.
We might change the API at any time, until we remove this notice.

简单例子​

🌐 Simple Example

Rotate 90 degrees clockwise
import {convertMedia} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  rotate: 90,
});

支持所有90的倍数的旋转值。视频将顺时针旋转。

🌐 All rotation values that are multiples of 90 are supported. The video will be rotated clockwise.

带旋转的视频​

🌐 Videos with rotation

嵌入了旋转元数据的视频在重新编码时默认会被旋转，以生成具有正确方向的视频。
这意味着你不应该尝试检测旋转元数据并自行进行校正，因为这会自动补齐。

🌐 Videos that have rotation metadata embedded will by default be rotated when re-encoded in order to produce a video with the correct orientation.
This means you should not try to detect rotation metadata and apply the correction yourself, because it will be done automatically.

如果你提供一个旋转，它将是在 convertMedia() 默认应用的自动旋转校正之外的额外旋转。

🌐 If you supply a rotation, it will be in addition to the automatic rotation correction that convertMedia() applies by default.

禁用自动旋转​

🌐 Disabling automatic rotation

如果你希望视频不自动旋转，你需要重新应用与视频中的旋转元数据相同的旋转。
这些旋转会相互抵消，并且convertMedia()不会执行任何应用旋转的代码。

🌐 If you want the video to not automatically be rotated, you need to re-apply the rotation that is the same as the rotation metadata in the video.
The rotations will negate each other, and convertMedia() will not execute any code to apply rotation.

Prevent automatic video rotation
import {convertMedia, defaultOnVideoTrackHandler} from '@remotion/webcodecs';

await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  onVideoTrack: async (params) => {
    const action = await defaultOnVideoTrackHandler(params);

    if (action.type !== 'reencode') {
      return action;
    }

    return {
      ...action,
      rotate: params.track.rotation,
    };
  },
});

有关如何自定义视频轨道转换的更多信息，请参见 Track Transformation。

🌐 See Track Transformation for more information on how to customize the video track transformation.

运算顺序​

🌐 Order of operations

如果你同时应用 rotate 和 resize 操作，将会先应用 rotate 操作。

🌐 If you apply both a rotate and a resize operation, the rotate operation will be applied first.

参考实现​

🌐 Reference implementation

使用 remotion.dev/rotate 使用 WebCodecs 在线旋转视频。
查看 源代码 以参考如何实现它。

🌐 Use remotion.dev/rotate to rotate a video online using WebCodecs.
See the source code for a reference on how to implement it.

另请参阅​

🌐 See also

Last updated on