Skip to main content

转换视频

warning

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

你可以使用 @remotion/webcodecs 的 convertMedia() 功能，在浏览器中将视频从一种格式转换为另一种格式。

🌐 You can convert a video in the browser from one format to another using the convertMedia() function from @remotion/webcodecs.

💼 重要许可免责声明
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.

支持以下输入格式：

🌐 The following input formats are supported:

  • ISO 基础媒体（.mp4，.mov，.m4a）
  • Matroska（.mkv，.webm）
  • .avi
  • MPEG传输流（.ts）
  • .wav,
  • .mp3
  • .flac
  • .aac
  • HLS（.m3u8）

支持以下输出格式：

🌐 The following output formats are supported:

  • MP4
  • webm
  • WAV

支持以下输出视频编解码器：

🌐 The following output video codecs are supported:

  • VP8（仅限 WebM）
  • VP9（仅限 WebM）
  • H.264（仅限 MP4）

支持以下输出音频编解码器：

🌐 The following output audio codecs are supported:

  • Opus（仅限 WebM）
  • AAC（仅限 MP4）
  • PCM（仅限 WAV）

安装​

🌐 Installation

安装 @remotion/webcodecs 和 @remotion/media-parser 包：

🌐 Install the @remotion/webcodecs and @remotion/media-parser packages:

npx remotion add @remotion/webcodecs @remotion/media-parser

🚧 不稳定的 API
This package is experimental.
We might change the API at any time, until we remove this notice.

基本转换​

🌐 Basic conversions

从 URL 转换​

🌐 Converting from an URL

（需要启用 CORS）

Converting an MP4 to a WebM
import {convertMedia} from '@remotion/webcodecs';

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

const blob = await result.save();

从 File 转换：​

🌐 Converting from a File:

Converting a file
import {convertMedia} from '@remotion/webcodecs';

// Get an actual file from an <input type="file"> element
const file = new File([], 'video.mp4');

const result = await convertMedia({
  src: file,
  container: 'webm',
});

const blob = await result.save();

指定输出编解码器​

🌐 Specifying the output codec

你可以通过传递 videoCodec 和 audioCodec 选项来指定输出编解码器：

🌐 You can specify the output codec by passing the videoCodec and audioCodec options:

Converting to VP9
import {convertMedia} from '@remotion/webcodecs';

const result = await convertMedia({
  src: 'https://remotion.media/BigBuckBunny.mp4',
  container: 'webm',
  videoCodec: 'vp9',
  audioCodec: 'opus',
});

const blob = await result.save();

正在保存已转换的视频​

🌐 Saving the converted video

convertMedia() 函数返回一个结果对象，该对象具有一个 save() 方法，你需要调用该方法以获取转换后的视频，格式为 Blob。

🌐 The convertMedia() function returns a result object with a save() method that you need to call to get the converted video as a Blob.

下载已转换的视频​

🌐 Download the converted video

Download converted video
import {convertMedia} from '@remotion/webcodecs';

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

const blob = await result.save();

// Create download link
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'converted-video.webm';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

上传已转换的视频​

🌐 Upload the converted video

Upload converted video
import {convertMedia} from '@remotion/webcodecs';

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

const blob = await result.save();

// Upload to server
const formData = new FormData();
formData.append('video', blob, 'converted-video.webm');

await fetch('/api/upload', {
  method: 'POST',
  body: formData,
});

显示已转换的视频​

🌐 Display the converted video

Display converted video
import {convertMedia} from '@remotion/webcodecs';

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

const blob = await result.save();

// Display in video element
const url = URL.createObjectURL(blob);
const video = document.createElement('video');
video.src = url;
video.controls = true;
document.body.appendChild(video);

// Don't forget to clean up when done
// URL.revokeObjectURL(url);

高级转换​

🌐 Advanced conversions

请参阅 Track Transformation 了解如何获得更多关于转换的控制。

🌐 See Track Transformation for how you can get more control over the conversion.

另请参阅​

🌐 See also

Last updated on