Safari中HTML5视频黑屏等问题的根本原因是其更严格的媒体加载策略：需确保响应头Content-Type正确（如video/mp4）、支持206分段响应及Accept-Ranges: bytes，视频编码必须为h264+aac且关键帧靠前，autoplay需同时含autoplay、muted、playsinline属性，并在用户手势中调用play()。
网页中HTML5视频在Safari浏览器上黑屏、静音、加载失败或完全不触发播放，根本原因不是代码写错了，而是Safari对媒体资源的加载策略、响应头规范和用户交互要求比其他浏览器更严格——尤其在iOS设备和macOS最新版中，这些限制已成硬性规则。
检查视频资源是否被Safari主动拒绝
打开开发者工具（Safari → 偏好设置 → 高级 → 勾选“在菜单栏中显示‘开发’菜单”），访问页面后点击「开发」→「显示网页检查器」→ 切换到「网络」标签，刷新页面，筛选出视频请求（如 .mp4、.m3u8）。
点击该请求，在右侧「标头」面板中查看「响应标头」里的 Content-Type 字段：必须是 video/mp4、video/webm 或 application/vnd.apple.mpegurl；若显示为 text/plain、application/octet-stream 或空值，Safari会直接跳过解析，不报错也不提示。
再看「状态」码：如果是 206（Partial Content），说明服务器支持分段请求，这是Safari加载大视频的必要条件；若始终返回 200 且无 Accept-Ranges: bytes 响应头，iOS Safari将无法启动播放。
验证视频格式与编码是否真正兼容
仅看文件后缀名（.mp4）毫无意义。用终端执行：ffprobe -v quiet -show_entries stream=codec_name,codec_type -of default video.mp4。
确认视频流（video）编码为 h264（非 h265/HEVC、AV1），音频流（audio）编码为 aac（非 opus、ac3），容器为 MP4。Safari macOS 14+ 和 iOS 17+ 仍不原生支持 HEVC 视频轨的 HTML5 播放，即使文件能用系统播放器打开，
若输出含 h264 和 aac，但 Safari 仍不播，需检查关键帧间隔：用 ffprobe -v quiet -show_entries packet=pts_time,duration_time -of csv=p=0 video.mp4 | head -n 20 查看前20帧时间戳是否密集（≤2s）。Safari 要求首关键帧必须在文件开头附近，否则无法内联渲染。
排查 autoplay 失效的真实原因
方法一：检查属性组合是否完整
方法二：确认没有隐式音频干扰
即使视频本身没声音，只要轨道含音频轨（哪怕全是静音帧），Safari 就认定其“可能发声”。用 ffmpeg -i video.mp4 -map 0:a -c copy /dev/null 2>&1 测试：若返回 “Stream #0:1 -> #0:0” 类似信息，说明存在音频流。此时必须加 muted，或用 ffmpeg -i video.mp4 -vcodec copy -acodec an -y noaudio.mp4 彻底移除音频轨。
方法三：排除 JS 调用时机错误
若用 JavaScript 手动调用 play()，必须确保该调用发生在用户手势事件回调内（如 button.addEventListener('click', () => video.play())）。在 DOMContentLoaded、load 或定时器中调用，Safari 直接抛 NotAllowedError 并拒绝。
定位服务器端 Accept-Ranges 配置缺陷
第一步：用 curl 模拟 Safari 的首次探测请求
curl -I https://yoursite.com/video.mp4，检查响应头是否含 Accept-Ranges: bytes。缺失此项，Safari 认定服务器不支持分段加载，后续所有 GET 请求都会被忽略。
第二步：验证分段响应是否合规
curl -H "Range: bytes=0-1023" https://yoursite.com/video.mp4 -i，响应状态码必须是 206 Partial Content，且含 Content-Range 和正确 Content-Length。若返回 200 或 416，说明服务端未实现 Range 请求处理逻辑。
第三步：确认 MIME 类型在响应头中显式声明
206 响应头中必须有 Content-Type: video/mp4。Nginx 默认配置下，静态文件响应头由 mime.types 决定，但 Range 请求可能绕过此机制，需手动添加：add_header Content-Type 'video/mp4'; 到 location 块中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
