在当今这个短视频爆炸的时代，视频处理已经成为了许多开发者和内容创作者的必备技能。但你有没有想过，只用前端技术，就能在浏览器里实现视频切割呢？作者开发的[秒切](https://huayemao.run/video-splitter?lang=zh) 正是这样一款强大的工具，它完全基于前端技术，在浏览器中就能轻松完成按秒（时间段）切割视频。 ![秒切截图](/api/files/miaoqie.webp) 用户只需上传视频文件，选择快速模式或精确模式，然后设置每段视频的时长，点击“开始分割”按钮即可。快速模式适合大部分场景，能够快速完成分割，而精确模式则可以实现帧级精度，满足专业需求。用户可以实时查看FFmpeg处理日志，了解切割进度。处理完成后，用户可以在弹窗中直接播放所有分割片段。秒切的便捷性还体现在它 Web 应用的特性：免安装使用上。用户无需安装任何软件，也不需要花费时间上传文件到服务器，直接在浏览器里就能完成分割。此外，它还支持移动端，随时随地都可以使用。今天，就让我们一起在 [秒切](https://huayemao.run/video-splitter?lang=zh) 这个案例的源代码中，探索如何利用 FFmpeg WASM 在浏览器中实现“按秒切割视频”的神奇功能。 ## 技术栈与核心库在开始之前，让我们先来了解一下本项目所使用的技术栈和核心库。我们的技术栈包括 Next.js、React、TypeScript 和 Tailwind CSS，另外还使用了基于 tailwind css 的 UI 组件库 [glint-ui](https://github.com/huayemao/glint-ui)。而此功能的核心库则是 `@ffmpeg/ffmpeg` 和 `@ffmpeg/util`，它们将帮助我们在浏览器中运行 FFmpeg，实现视频处理的功能。 ## 目录结构需要说明的是，秒切是 [Dors.——花野猫的数字花园](https://huayemao.run/) 的一个子功能，其代码实现在 [dors](https://github.com/huayemao/dors) 这个 github 仓库中，所以目录结构也遵循 dors 的目录结构设计。整个功能其实是一个 Next.js app router 的路由，代码存放在 `@/app/(projects)/video-splitter` 目录下，主要文件包括： - `page.tsx`：页面文件，包含右侧的“使用指南”区域。 - `VideoSplitter.tsx`：主功能组件，负责 FFmpeg 的初始化、视频切割流程以及弹窗预览。 ## 1. 初始化 FFmpeg（WASM 加载） FFmpeg 在浏览器中运行依赖于 WASM 核心文件。在项目中，我们通过 `toBlobURL` 从 CDN 拉取并加载这些文件。以下是初始化 FFmpeg 的代码： ```ts // VideoSplitter.tsx（节选） const ffmpegRef = useRef(new FFmpeg()); const loadFFmpeg = async () => { const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd "; const ffmpeg = ffmpegRef.current; try { setFfmpegLoading(true); setFfmpegProgress(0); // 简单的“加载进度”模拟（UI 友好） const progressInterval = setInterval(() => { setFfmpegProgress((prev) => (prev >= 90 ? (clearInterval(progressInterval), 90) : prev + 10)); }, 100); await ffmpeg.load({ coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"), wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"), }); clearInterval(progressInterval); setFfmpegProgress(100); setTimeout(() => { toast.success(t.ffmpegLoaded); setFfmpegLoaded(true); setFfmpegLoading(false); }, 500); } catch (error) { console.error(error); toast.error(t.ffmpegLoadFail); setFfmpegLoading(false); } }; useEffect(() => { loadFFmpeg(); }, []); ``` ### 要点 - 首次进入页面即加载 FFmpeg WASM。 - UI 显示“加载中 + 进度条”，避免白屏。 - 加载完成后设置 `ffmpegLoaded`，作为“开始分割”按钮的可用条件之一。 ## 2. 选择与预览视频（点击/拖拽）文件选择使用自定义的 `BaseInputFileHeadless`，同时支持拖拽区域。以下是代码示例： ```tsx // VideoSplitter.tsx（节选） file.type.startsWith('video/')} renderContent={({ open, drop, files }) => (

{ e.preventDefault(); setIsDragOver(true); }} onDragLeave={(e) => { e.preventDefault(); setIsDragOver(false); }} onDrop={handleDragDrop} onClick={open} >

{/* 省略：未选择文件时的引导 UI、示例视频按钮与预加载 */}

)} /> ``` 选择文件后，生成一个临时 URL 并载入 `

收藏 | 职业