标签播放大视频文件的限制与优化方案
" />
html5 `
在 Google Apps Script（GAS）构建的 Web App 中，通过 <video> 标签直接加载 Google Drive 上的 500MB 视频失败，并非因为 HTML 规范设限，而是由于当前实现方式触发了完整文件预加载，导致内存溢出、超时或跨域/权限阻断。关键问题在于：你使用的 source.src 直接指向 Drive 文件链接（如 https://drive.google.com/file/d/.../view），而这类链接默认不支持 HTTP Range Requests——即无法分片加载（streaming），浏览器必须下载整个文件才能开始解码播放。
✅ 正确做法：使用可流式访问的视频 URL
Google Drive 中的视频需通过 export?format=mp4 或更可靠的 uc?id=FILE_ID 共享链接，并确保文件已设置为“任何人可查看”（或至少对 Web App 用户可见）。推荐构造如下格式的直链：
<!-- 示例：替换 YOUR_FILE_ID --> <source src="https://drive.google.com/uc?id=YOUR_FILE_ID" type="video/mp4">
⚠️ 注意：uc?id= 链接支持 HTTP Range 请求，是实现流式播放的前提；而 view 或 export 链接常重定向至 HTML 页面或不支持分段请求，导致大文件加载失败。
? 优化 <video> 标签行为
避免默认 preload="auto"（会尝试预加载全部内容），显式声明 preload="metadata"，仅获取时长、尺寸等元信息，显著降低初始资源开销：
立即学习“前端免费学习笔记（深入）”；
<video id="vid" controls autoplay muted preload="metadata"> <source src="" type="video/mp4"> </video>
同时，在 JavaScript 中更新源后，无需手动调用 .load()（现代浏览器在 src 变更后自动触发加载）；若需强制重载，建议加 load() 前先清空 src：
const video = document.getElementById('vid');
const source = video.querySelector('source');
// 安全更新：先清空再赋值
source.src = '';
source.src = e.target.options.vidID; // 确保 vidID 是 uc?id=... 格式
// video.load(); // 可省略 —— 浏览器自动处理
video.play().catch(e => console.warn("Auto-play prevented:", e));? 进阶建议：服务端转码 + CDN 分发
对于长期运营的交互式地图应用，强烈建议：
- 使用 Google Cloud Video Intelligence API 或 FFmpeg（通过 Apps Script 调用 Cloud Function）将原始视频转为 H.264 编码、1080p 以下、码率 ≤5 Mbps 的 MP4；
- 将压缩后视频上传至 Google Cloud Storage（GCS）并启用 CDN 缓存，生成带签名或公开的 HTTPS 直链；
- 在 Sheet 中存储 GCS 链接（如 https://storage.googleapis.com/your-bucket/video1.mp4），彻底规避 Drive 权限与性能瓶颈。
? 总结
| 问题根源 | 解决方案 |
|---|---|
| Drive view 链接不支持流式 | 改用 uc?id=... 直链 |
| preload="auto" 导致内存压力 | 显式设为 preload="metadata" |
| 大文件未压缩/编码不佳 | 转 H.264 + 合理分辨率/码率 |
| GAS 前端缺乏错误反馈 | 添加 video.onerror 监听日志 |
只要视频托管服务支持 HTTP Range 请求，且前端配置合理，播放数 GB 的 MP4 文件在 Chrome/Firefox/Edge 中完全可行——500MB 失败，本质是架构选择问题，而非技术不可行。
