浏览器视频格式支持
不同浏览器对视频格式的支持程度不同，这是造成兼容性问题的根本原因。
| 格式 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| MP4 (H.264) | ✓ | ✓ | ✓ | ✓ |
| WebM (VP8/VP9) | ✓ | ✓ | ✗ | ✓ |
| HLS (m3u8) | 需库 | 需库 | ✓ | 需库 |
| DASH | 需库 | 需库 | 需库 | 需库 |
常见兼容性问题
1. MP4 无法播放
可能原因：视频编码不被支持。确保使用 H.264 视频编码 + AAC 音频编码。
2. iOS Safari 无法内联播放
解决方案：添加 playsinline 和 webkit-playsinline 属性。
<video playsinline webkit-playsinline></video>3. 自动播放被阻止
浏览器策略：带声音的视频不能自动播放。使用 muted 属性或等待用户交互。
CORS 问题
如果视频文件和网页不在同一域名，需要服务器正确配置 CORS 头：
Access-Control-Allow-Origin: https://your-site.com
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Content-Length
💡 最佳实践：使用专门的视频播放器库（如 hls.js、TCPlayer）来处理各种兼容性问题，它们已经处理好了底层细节。