手机浏览器下载视频源码拆解：3个避坑点+保姆级教程

复制来的代码跑不通，报错 AbortError 或者进度条卡死在 99%，这种痛苦谁懂？很多开发者对着控制台抓头，不知道是网络问题还是逻辑 bug。别慌，今天这篇保姆级教程不玩虚的，直接带你从底层 HTTP 请求开始，扒开“手机浏览器下载视频”这层皮，看看那些开源库到底是怎么处理大文件下载的。

咱们不背八股文，直接看代码。

入口定位：浏览器到底是怎么下载文件的？

很多人以为下载视频就是 fetch 一下，把 blob 存起来。错得离谱。在手机浏览器里，尤其是 iOS 的 Safari 或 Android 的 Chrome，直接通过 JS 触发文件保存是受限的。浏览器为了安全，默认不让 JS 直接写本地文件系统。

真正的入口在于拦截响应头。当你发起一个请求，如果服务器返回 Content-Disposition: attachment 或者特定的 Content-Type，浏览器的原生下载管理器就会接管。对于前端开发者来说，我们的核心任务不是“写文件”，而是构造一个让浏览器原生下载管理器“愿意接管”的请求。

这里有个关键点：AbortController。在大视频下载中，用户随时可能取消。如果代码里没有处理取消逻辑，一旦中断，内存泄漏和状态不同步就是家常便饭。

核心片段：带进度与中断控制的下载器

下面这段代码是一个精简版的下载核心逻辑，基于 fetch API 和 ReadableStream。这是目前最通用的方案，兼容主流手机浏览器。

class VideoDownloader {constructor(url, onProgress, onAbort) {this.url = url;this.onProgress = onProgress;this.onAbort = onAbort;this.controller = new AbortController(); // 用于中断请求this.aborted = false;}async start() {try {// 1. 发起请求，传入 signal 以支持取消const response = await fetch(this.url, {signal: this.controller.signal});// 2. 检查响应状态，非 200 直接抛错if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}// 3. 获取总文件大小，用于计算进度百分比const contentLength = response.headers.get('Content-Length');const totalSize = contentLength ? parseInt(contentLength) : 0;let receivedBytes = 0;// 4. 获取响应体流，这是实现进度条的关键const reader = response.body.getReader();const chunks = [];while (true) {const { done, value } = await reader.read();if (done) break;// 5. 累积数据块chunks.push(value);receivedBytes += value.length;// 6. 触发进度回调if (this.onProgress && totalSize > 0) {const percent = (receivedBytes / totalSize) * 100;this.onProgress(percent);}// 7. 检查是否被手动取消if (this.aborted) {this.controller.abort();break;}}// 8. 合并所有数据块，生成 Blobconst blob = new Blob(chunks, { type: 'video/mp4' });// 9. 触发浏览器原生下载this.triggerDownload(blob);} catch (error) {if (error.name === 'AbortError') {// 处理用户主动取消的情况if (this.onAbort) this.onAbort();return;}throw error;}}cancel() {this.aborted = true;this.controller.abort(); // 触发 fetch 的 AbortError}triggerDownload(blob) {// 创建临时链接const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'video.mp4'; // 默认文件名，建议根据 URL 解析// 兼容 iOS Safari：必须 appendChild 到 body 才能触发document.body.appendChild(a);a.click();// 清理 DOM 和内存document.body.removeChild(a);URL.revokeObjectURL(url); // 释放内存，防止泄漏}
}

逐行拆解重点

AbortController 的使用：这是现代浏览器 API 的亮点。通过 signal 将控制权传递给 fetch，一旦调用 abort()，整个请求链路会立即终止，比传统的 xhr.abort() 更优雅，且不会留下未处理的 Promise 拒绝。
response.body.getReader()：这是实现“真实进度”的核心。传统的 onprogress 事件在某些移动端浏览器上可能不准确或延迟极高。通过手动读取流（Stream），我们可以精确计算已接收字节数，进度条丝滑度直接翻倍。
URL.revokeObjectURL：这是新手最容易忽略的坑。每次 createObjectURL 都会在内存中分配一块空间。如果下载多个视频或者频繁重试，不释放这个 URL，移动端内存会迅速爆满，导致页面卡死甚至崩溃。MDN Web Docs 明确建议，在不再需要 Blob 对象时，必须调用此方法释放内存。

设计思想：为什么不全量加载再下载？

你可能会问：为什么不直接 fetch 拿到整个 Buffer，再转成 Blob？

内存限制。一部 1080P 的视频可能有几百 MB 甚至 1GB。如果在 JS 内存中一次性加载整个文件，手机浏览器（尤其是低端安卓机）很容易 OOM（Out Of Memory）。

上述代码虽然也是将数据存入 chunks 数组，再合并成 Blob，但在实际生产环境中，更高级的做法是分片下载或直接利用服务端支持的范围请求（Range Requests）。

这里涉及一个设计权衡：

前端 Blob 方案：兼容性最好，逻辑简单，但受限于内存。适合小于 100MB 的文件。
服务端流式转发：前端只负责发起请求，后端通过 pipe 将视频流直接写入 HTTP Response，前端浏览器自动接管下载。这种方式对前端内存零压力，但需要后端配合，且前端无法获取精确进度（除非后端返回 Content-Length 且浏览器支持）。

对于大多数前端场景，分片下载是更稳健的选择。将视频切成 1MB 的片，逐个下载，最后在服务端或前端（如果是小文件）合并。但考虑到手机浏览器限制，最推荐的架构是：前端只负责触发和展示进度，实际下载交给浏览器原生机制或后端中转。

手写简化版：兼容 iOS 的终极方案

上面的代码在 Android 上完美，但在 iOS Safari 上，a.click() 经常失效，或者下载的文件名丢失。这是因为 iOS 对 DOM 操作和 URL 对象有特殊的沙盒限制。

这里提供一个经过实战验证的简化版，专门针对移动端优化：

function downloadVideoMobile(url, fileName = 'video.mp4') {return new Promise((resolve, reject) => {// 1. 使用 XMLHttpRequest 而非 Fetch，因为 XHR 对 abort 的兼容性在旧版 iOS 上更稳定// 注：新版 iOS 已支持 Fetch Abort，但 XHR 依然更“古老”且稳定const xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob'; // 关键：直接让浏览器解析为 Blob// 进度监听xhr.onprogress = (e) => {if (e.lengthComputable) {const percent = Math.round((e.loaded / e.total) * 100);console.log(`Download progress: ${percent}%`);// 这里可以更新 UI}};// 错误处理xhr.onerror = () => reject(new Error('Network Error'));xhr.ontimeout = () => reject(new Error('Request Timeout'));// 完成处理xhr.onload = () => {if (xhr.status === 200) {const blob = xhr.response;// iOS 兼容处理：使用 URL.createObjectURLconst blobUrl = URL.createObjectURL(blob);// 创建隐藏链接const link = document.createElement('a');link.href = blobUrl;link.download = fileName;// 关键：iOS 必须添加到文档流中才能触发点击事件document.body.appendChild(link);link.click();// 清理setTimeout(() => {document.body.removeChild(link);URL.revokeObjectURL(blobUrl);resolve();}, 100);} else {reject(new Error(`HTTP ${xhr.status}`));}};// 设置超时，防止请求挂起xhr.timeout = 60000; // 60秒xhr.send();});
}

为什么这个版本更“稳”？

responseType = 'blob'：让浏览器在底层直接将二进制数据转为 Blob，避免了 JS 层手动拼接 ArrayBuffer 的性能开销。
setTimeout 延迟清理：在 iOS 上，如果立即移除 DOM 节点，下载动作可能被中断。延迟 100ms 移除，给浏览器足够的反应时间。
XHR 的 onprogress：虽然 fetch 更现代，但 XHR 的 onprogress 事件在计算 e.total 时，只要服务器返回了 Content-Length，浏览器就能准确计算总大小。对于视频下载，这个指标至关重要。

应用场景：从理论到落地

在实际项目中，你很少会单独写一个下载器。它通常是整个功能模块的一部分。

场景一：云盘客户端 用户选择视频，前端发起下载。此时不能只用上述简单代码，必须加上断点续传。

实现思路：利用 HTTP 的 Range 头。如果上次下载到 50%，重新发起请求时带上 Range: bytes=5000000-。服务端返回 206 Partial Content，前端将新数据追加到已有的 Blob 中（或临时文件）。
难点：Blob 是不可变的。要实现追加，你需要将下载的数据存入 IndexedDB 或 LocalStorage（如果够小），每次下载一块，就存一块，最后合并。这在移动端是巨大的性能挑战，通常建议后端生成一个临时签名 URL，直接让浏览器下载，前端只负责轮询状态。

场景二：短视频 App 的缓存 用户刷视频，后台静默下载下一集。

实现思路：使用 Service Worker 拦截请求，将视频缓存到 Cache Storage。下次用户点击时，直接从缓存读取，秒开。
注意：Cache Storage 有大小限制（通常几十 MB），不适合缓存完整的高清视频，只适合缓存缩略图或前几秒预览。

避坑指南：

不要依赖 a.download 属性在所有环境都生效：在移动端，如果 URL 是跨域的，download 属性可能被忽略，浏览器会直接跳转播放而非下载。解决方案：确保请求同源，或通过后端代理返回带 Content-Disposition: attachment 的响应。
网络切换处理：用户在 WiFi 下开始下载，切换到 4G，流量可能爆炸。前端应监听 navigator.onLine 或 navigator.connection（如果可用），在网络类型变化时暂停下载，并提示用户确认。
文件名乱码：如果视频文件名包含中文，URL 编码处理不当会导致下载后文件名乱码。务必使用 encodeURIComponent 处理文件名，并在后端正确解码。