编程能手速成记：120 行代码玩转 Web 剪辑视频

2024-01-12 21:46:24

120 行代码开启浏览器端视频剪辑的神奇之旅

前言

视频剪辑曾是程序员的专利领域，需要专业的软件、设备和高超的技巧。但随着 WebAssembly（简称 WASM）的横空出世，这一切都变得触手可及。借助 WASM 和 FFmpeg.js，只需 120 行代码，你就能在浏览器中轻松实现纯前端的视频剪辑。

WebAssembly：浏览器的超级加速器

WASM 是一项革命性的技术，允许在浏览器中运行用 C/C++ 等编译语言编写的代码。这极大地提高了代码执行效率，弥补了 JavaScript 性能的瓶颈。

FFmpeg.js：视频处理利器

FFmpeg.js 是一个用 JavaScript 编写的 FFmpeg 端口，为多种音视频格式提供了解码和编码支持。它与 WASM 强强联手，让浏览器端视频剪辑成为可能。

120 行代码玩转视频剪辑

现在，让我们开启这段精彩的旅程，用 120 行代码实现 Web 剪辑视频：

准备工作

文本编辑器
浏览器
FFmpeg.js 库（下载地址：https://github.com/ffmpegwasm/ffmpeg.js）

步骤

1. 创建 HTML 文件

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <video id="video" controls></video>
    <script src="ffmpeg.js"></script>
    <script src="script.js"></script>
  </body>
</html>

2. 创建 JavaScript 文件

// 加载 FFmpeg.js 库
FFmpeg.wasmBinary = 'ffmpeg-core.wasm';

// 创建 FFmpeg 实例
const ffmpeg = new FFmpeg();

// 加载视频文件（用 Uint8Array 表示视频数据）
ffmpeg.FS('writeFile', 'video.mp4', new Uint8Array(videoData));

// 剪辑视频
ffmpeg.run('-ss', '00:00:00', '-t', '00:00:10', '-i', 'video.mp4', 'output.mp4').then(() => {

  // 显示剪辑后的视频
  const videoElement = document.getElementById('video');
  videoElement.src = 'output.mp4';
});