Safari 对 标签有严格的播放策略（如强制静音、禁止自动播放音频、不支持部分编码格式），导致常见写法在 Chrome 正常却在 Safari 失效；本文详解兼容性要点、必需属性、格式选择及 Next.js 环境下的实践方案。
safari 对 `
HTML
- ❌ 缺少 autoplay 和 muted 属性（Safari 要求静音自动播放必须同时设置 autoplay 与 muted）；
- ❌ playsinline 写法错误（应为 playsinline 布尔属性，或 React/JSX 中写作 playsInline={true}）；
- ❌ 使用 .ogv（Ogg Theora）格式——Safari 完全不支持 Ogg 容器；
- ❌ preload 未指定值（应为 "auto"、"metadata" 或 "none"，空属性无效）；
- ❌ 未提供 Safari 最兼容的 .mp4（H.264 + AAC）格式源。
✅ 正确做法是：优先提供 MP4（H.264）+ WebM（VP9）双源，强制静音、内联播放、自动加载元数据，并确保属性语法符合规范。
以下是经过 Safari（macOS/iOS 15+）、Chrome、Firefox 全平台验证的兼容写法（原生 HTML）：
<video controls autoplay muted playsinline loop preload="metadata" width="100%" height="100%"> <source src="/video/background.mp4" type="video/mp4"> <source src="/video/background.webm" type="video/webm"> 您的浏览器不支持视频播放。 </video>
⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- MP4 必须使用 H.264 视频编码 + AAC 音频编码（可用 FFmpeg 检查：ffprobe -v quiet -show_entries stream=codec_name,codec_type video.mp4）；
- 若仅需背景视频（无用户交互），建议移除 controls 并设 controls={false}（React）以避免 Safari 在静音状态下隐藏控件；
- 在 Next.js 等 SSR 框架中，需通过 useRef 绑定 DOM 引用，并在 useEffect 中手动调用 play()（因 Safari 可能延迟触发自动播放）；
- 添加 #t=0.001 片段标识（如 video.mp4#t=0.001）可绕过 Safari 对首帧解码失败的阻塞（尤其对低分辨率/快速加载场景有效）；
- 始终将 .mp4 放在
列表首位——Safari 会按顺序尝试，优先匹配其原生支持格式。
最后，推荐使用 ffmpeg 生成兼容版本：
# 生成 Safari 友好 MP4（H.264 + AAC） ffmpeg -i input.mov -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k -movflags +faststart output.mp4 # 生成 WebM（VP9 + Opus，用于 Chrome/Firefox） ffmpeg -i input.mov -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus -vbr on output.webm
遵循以上规范，即可彻底解决 Safari 视频不播放问题，实现跨浏览器稳定运行。
