如何在Node.js+React Web应用中播放存储于S3的.avi视频？

一、上传时自动转码（推荐，性能最优） #

AVI并非Web友好格式，提前转码能彻底避免播放端的性能瓶颈，适合绝大多数生产场景。结合AWS生态可以这么实现：

• 利用S3事件触发+AWS Lambda：用户上传AVI到S3存储桶后，自动触发Lambda函数，通过预安装FFmpeg的Lambda层将AVI转码为浏览器原生支持的MP4（H.264编码）或WebM格式，转码完成后将新文件存入原桶或专用转码桶，同时可在DynamoDB中记录原文件与转码文件的映射关系。
• React端直接播放转码后的文件：用HTML5 video标签或react-player直接加载转码后的S3文件URL，无需额外处理，播放流畅度拉满。
• Lambda核心代码示例（Node.js）：

const { S3Client, GetObjectCommand, PutObjectCommand } = require("@aws-sdk/client-s3");
const ffmpeg = require("fluent-ffmpeg");
const { PassThrough } = require("stream");

const s3 = new S3Client({ region: "你的AWS区域" });

exports.handler = async (event) => {
  const record = event.Records[0];
  const bucket = record.s3.bucket.name;
  const key = decodeURIComponent(record.s3.object.key.replace(/\+/g, " "));

  // 从S3拉取AVI文件
  const getObjectCmd = new GetObjectCommand({ Bucket: bucket, Key: key });
  const { Body } = await s3.send(getObjectCmd);

  // 构建转码流
  const transcodeStream = new PassThrough();
  ffmpeg(Body)
    .outputOptions("-c:v", "libx264", "-c:a", "aac", "-f", "mp4")
    .pipe(transcodeStream);

  // 上传转码后的MP4到S3
  const newKey = key.replace(".avi", ".mp4");
  const putObjectCmd = new PutObjectCommand({
    Bucket: bucket,
    Key: newKey,
    Body: transcodeStream,
    ContentType: "video/mp4"
  });
  await s3.send(putObjectCmd);

  return { statusCode: 200, body: "转码完成" };
};

• 注意：给Lambda配置至少1GB内存和足够的超时时间，同时将FFmpeg打包为Lambda层导入，避免函数包体积过大。

二、播放时动态转码（适合存量AVI文件） #

如果已有大量存量AVI文件不想批量转码，可以采用实时转码方案：

• AWS托管方案：用CloudFront作为CDN，当用户请求AVI文件时，触发Lambda@Edge检查是否存在转码后的文件，若不存在则调用MediaConvert实时转码，将转码后的流返回给浏览器。
• 自建后端代理：前端请求播放地址时，Node.js后端从S3拉取AVI文件，用FFmpeg实时转码为MP4流返回给前端，React端用video标签接收流播放。但这种方式性能开销大，仅适合小文件或低并发场景。
• 后端代理代码示例（Node.js）：

const express = require("express");
const { S3Client, GetObjectCommand } = require("@aws-sdk/client-s3");
const ffmpeg = require("fluent-ffmpeg");

const app = express();
const s3 = new S3Client({ region: "你的AWS区域" });

app.get("/play-video/:key", async (req, res) => {
  const { key } = req.params;
  const getObjectCmd = new GetObjectCommand({ Bucket: "你的存储桶名称", Key: key });
  const { Body } = await s3.send(getObjectCmd);

  res.setHeader("Content-Type", "video/mp4");
  // 实时转码并返回流
  ffmpeg(Body)
    .outputOptions("-c:v", "libx264", "-c:a", "aac", "-f", "mp4")
    .pipe(res);
});

app.listen(3001);

三、前端浏览器转码（临时兜底方案，不推荐） #

如果以上方案暂时无法落地，可以尝试用ffmpeg.wasm在前端转码：

• 在React项目中引入ffmpeg.wasm库，将S3上的AVI文件下载到浏览器，转码为MP4后再用video标签播放。
• 缺点：转码过程占用浏览器资源，大文件会卡顿，且受浏览器内存限制，仅适合小视频临时使用。
• React组件示例：

import React, { useState } from "react";
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

const VideoPlayer = ({ aviUrl }) => {
  const [mp4Url, setMp4Url] = useState(null);
  const ffmpeg = createFFmpeg({ log: true });

  const loadAndTranscode = async () => {
    await ffmpeg.load();
    ffmpeg.FS("writeFile", "input.avi", await fetchFile(aviUrl));
    await ffmpeg.run("-i", "input.avi", "output.mp4");
    const data = ffmpeg.FS("readFile", "output.mp4");
    const url = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));
    setMp4Url(url);
  };

  return (
    <div>
      {!mp4Url && <button onClick={loadAndTranscode}>加载并转码视频</button>}
      {mp4Url && <video src={mp4Url} controls />}
    </div>
  );
};

export default VideoPlayer;

内容的提问来源于stack exchange，提问作者Luis