17370845950

确认 Safari 版本是否过旧

HTML5 标准持续演进，老版本 Safari（如 macOS 10.9 / Safari 7 或更早）不支持 fetch()、Promise、IntersectionObserver、WebP 图片 等较新特性。常见表现是网页白屏、视频无法播放、控制台报 ReferenceError: Can't find variable: fetch。

• macOS Monterey (12) 及以上 → Safari 15+，基本覆盖主流 HTML5 API
• macOS Catalina (10.15) → Safari 13.1 是底线，建议升级到 Safari 14+
• iOS 13+ 对应的 Safari 已支持 WebRTC、MediaRecorder 等高级功能

检查开发者菜单是否误关了实验性功能

Safari 默认隐藏部分 HTML5 相关实验性 API（如 WebGPU、SharedArrayBuffer），但它们不影响日常网页浏览。只有开发调试时才需手动启用：

• 打开 Safari → 偏好设置 → 高级 → 勾选「在菜单栏中显示“开发”菜单」
• 点击顶部菜单栏「开发 → 实验性功能」，确认以下项未被禁用：WebAssembly、Web Animations API、WebRTC
• ⚠️ 注意：SharedArrayBuffer 在 Safari 中默认关闭（因 Spectre 缓解策略），若网页依赖它，需配合 cross-origin-isolated 头部署，不是单纯勾选就能用

网页不播视频/音频？先看 autoplay 策略和 MIME 类型

Safari 对自动播放（autoplay）限制极严：无用户交互时，静音视频可播，带声音的视频必须由用户手势触发。同时，它只支持特定编码：

• 视频容器必须是 .mp4（H.264 + AAC）或 .mov；WebM 和 AV1 在 Safari 16.4+ 才开始有限支持
• 检查响应头是否含 Content-Type: video/mp4，错误类型（如 text/plain）会导致 标签加载失败
• 避免写 ，改用 + JS 在用户点击后调用 play()

遇到 DOMException: The element has no supported sources 怎么办

这是 Safari 最典型的 HTML5 报错之一，根本原因常是： 标签的 type 属性声明与实际文件不匹配，或服务器未返回正确 MIME 类型。

立即学习“前端免费学习笔记（深入）”；

• 删掉 type="video/webm"（Safari 15.4 之前完全不识别 WebM）
• 确保 video.mp4 文件真实是 H.264 编码（可用 ffprobe video.mp4 验证）
• 如果用 Nginx，加配置：types { video/mp4 mp4; }，否则可能返回 application/octet-stream