上传前，在浏览器内压缩视频

安装

npm install github:karuha-m/browser-video-compression

组件以 ES 模块发布，附带 TypeScript 类型定义，依赖 mediabunny 读取与写入媒体文件。

快速开始

在文件选择后调用 compressVideo，把返回的 result.file 交给原有的上传代码即可。

import { compressVideo } from 'browser-video-compression';

input.addEventListener('change', async (event) => {
  const original = event.target.files[0];

  const result = await compressVideo(original, {
    maxWidthOrHeight: 1280, // 720p
    skipBelowMB: 10,        // small files are uploaded as they are
    onProgress: (p) => console.log(Math.round(p * 100) + '%'),
  });

  // result.file is the compressed file, or the original when
  // compression was skipped (see result.skipReason)
  const body = new FormData();
  body.append('video', result.file);
  await fetch('/upload', { method: 'POST', body });
});

配合上传库使用

result.file 是标准的 File 对象，可直接交给 tus、Uppy、S3 预签名地址或 Mux、Cloudflare Stream 的直传接口。

import * as tus from 'tus-js-client';

const { file } = await compressVideo(original);
new tus.Upload(file, { endpoint: '/files/' }).start();

上传前检查

inspectVideo 只读取容器元数据，不解码整个文件，可用于在上传前检查时长、分辨率与编码。

import { inspectVideo } from 'browser-video-compression';

const info = await inspectVideo(file);
// { duration, width, height, videoCodec, audioCodec, bitrate, canDecode, ... }
if (info.duration > 600) alert('Please keep videos under 10 minutes.');

取消压缩

const controller = new AbortController();
cancelButton.onclick = () => controller.abort();

const result = await compressVideo(file, { signal: controller.signal });

参数

返回值包含 file、compressed、skipReason、originalSize、size、width、height 与 duration。只有在调用方取消时 Promise 才会被拒绝；其余情况下 compressed 为 false 时，skipReason 说明返回原文件的原因：

• already-small文件已低于 skipBelowMB，且尺寸在上限内。
• unsupported-browser当前浏览器没有可用的 WebCodecs 编码器。
• unsupported-input文件没有视频轨，或当前浏览器无法解码该视频。
• not-smaller压缩结果没有比原文件更小。
• failed压缩过程中出错，详细信息见 error 字段。

浏览器支持

适用场景

想先看看压缩效果，可以直接使用 VideoKit 在线视频压缩，它同样在浏览器内处理文件。

常见问题