iOS设备无法加载video标签，主因是Safari严格依赖的type声明与服务器MIME类型匹配，缺失type或格式不兼容（如WebM/VP9）将被静默跳过，且仅支持H.264/AAC编码的MP4。
video 标签只写 src 属性，90% 场景会失败
浏览器根本不会尝试解码，只看 type 声明和 MIME 类型是否匹配。没 <source></source>、没 type，等于把选择权交给浏览器瞎猜——而 Safari 会直接跳过，Chrome 可能加载但报 ERR_CONTENT_DECODING_FAILED。
必须用多个 <source></source> 显式声明格式：
<video controls> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> 您的浏览器不支持 video 标签 </video>
-
type不是可选的：它让浏览器在发起请求前就过滤掉不支持的格式，避免无意义的 404 或卡顿 - 顺序很重要：WebM 放最前（Chrome/Firefox 优先），MP4 放最后（Safari/IE/Edge 兜底）
- 别依赖自动 MIME 推断：即使文件后缀是
.mp4，若服务器返回text/plain，照样加载失败
iOS 不支持 WebM 音频，也不支持 VP9 视频
这是最常被忽略的硬性限制——不是“可能播不了”，而是 iOS 系统级拒绝解码。哪怕你加了 type="video/webm"，Safari 也会静默跳过该 <source></source>，连 network 请求都不会发。
验证方式很简单：在真机 Safari 打开开发者工具（需 macOS + USB 连接），看 Network 面板里有没有对应 .webm 的请求记录。没有，就是被筛掉了。
立即学习“前端免费学习笔记（深入）”；
- 音频场景下，
.webm（VP8/Vorbis）和.ogg（Theora/Vorbis）对 iOS 完全无效，只认.mp3和.aac - 视频场景下，iOS 只支持 H.264 编码的 MP4 容器；VP9、AV1、AVC-Intra 等一概不认
- 别信“转成 WebM 就能小体积”——在 iOS 上它根本不会加载，体积再小也没用
服务器 MIME 类型配置错误，video 标签直接变空白
浏览器看到 type="video/mp4"，就会期望服务器返回 Content-Type: video/mp4。如果服务器返回 application/octet-stream 或 text/html，多数现代浏览器（尤其是 Safari）会中断加载并静默失败，控制台甚至不报错。
检查方法：打开 Network 面板，点击视频请求 → 查看 Response Headers → 确认 Content-Type 字段值是否匹配 <source></source> 中的 type。
- Apache：在
.htaccess或虚拟主机配置中添加AddType video/mp4 .mp4、AddType video/webm .webm - Nginx：在
http或server块中加入types { video/mp4 mp4; video/webm webm; } - 静态托管服务（如 Vercel、Netlify）通常默认支持，但自建 Node.js 服务（如 Express）必须手动设置
res.set('Content-Type', 'video/mp4')
download 属性在跨域资源上会被浏览器忽略
只要视频 URL 是跨域的（比如 CDN 域名不同于当前页面），download 属性就形同虚设。Chrome、Firefox、Safari 全部无视它，点击后只会播放而非下载。
这不是 bug，是安全策略强制行为。即使响应头加了 Access-Control-Allow-Origin: *，也改变不了这个限制。
- 真正能下载的唯一路径：资源必须同源，或通过
fetch+Blob+URL.createObjectURL()构造本地 blob URL - 不要在
<a download></a>里直接写 CDN 地址，那只会打开播放页 - 移动端尤其要注意：iOS Safari 对
download支持本就极弱，跨域时彻底失效
兼容性不是加几个格式就能躺平的事。iOS 的编解码白名单、服务器 MIME 的隐式依赖、跨域 download 的不可绕过——这些点任何一个漏掉，都会让整个多媒体功能在某类设备上完全消失。动手前先查真机表现，别只盯着 Chrome DevTools 里的模拟器。
