视频无法播放主要因格式不兼容、autoplay被阻止、MIME类型错误。应提供MP4和WebM多格式源，添加muted实现静音自动播放，并确保服务器正确配置video/mp4等MIME类型。
HTML5 的 video 标签让网页嵌入视频变得简单，但开发者常遇到“视频无法播放”的问题。这通常不是代码写错，而是由视频格式兼容性和autoplay策略限制导致。下面分析原因并提供实用解决方案。
视频格式不被浏览器支持
不同浏览器对视频编码格式的支持存在差异。即使使用了 video 标签，如果视频文件的编解码器不被当前浏览器识别，就会出现黑屏或提示“无法播放”。
常见浏览器支持情况：- Chrome、Edge：支持 MP4 (H.264 + AAC)、WebM (VP8/VP9)
- Firefox：优先支持 WebM，也支持 MP4（H.264）
- Safari：仅支持 MP4（H.264 + AAC），不支持 WebM
只提供一种格式（如 WebM）时，Safari 用户将无法观看。
解决方案：- 使用多种格式源进行 fallback，确保跨浏览器兼容
- 推荐以 MP4 (H.264) 为主格式，搭配 WebM 提高开源浏览器体验
示例代码：
立即学习“前端免费学习笔记（深入）”；
Autoplay 被浏览器阻止
很多开发者发现视频设置了 autoplay 却不自动播放。这是现代浏览器出于用户体验和流量节省考虑实施的安全策略。
主要限制规则：
- 带声音的视频默认禁止自动播放
- 移动端（iOS Safari、Android Chrome）几乎完全禁止 autoplay
- 允许 autoplay 的条件：静音（muted）或用户有交互历史
- 若需自动播放，添加 muted 属性
- 通过 JavaScript 在用户点击后触发播放
允许自动播放的示例：
JavaScript 控制播放（提升兼容性）：
const video = document.querySelector('video');
document.addEventListener('click', () => {
video.play().catch(e => console.log('播放被阻止:', e));
}, { once: true });
服务器MIME类型配置错误
即使格式正确，如果服务器未正确设置视频文件的 MIME 类型，浏览器可能拒绝加载。
常见视频 MIME 类型：- .mp4 → video/mp4
- .webm → video/webm
检查方法：打开浏览器开发者工具，查看 Network 面板中视频请求的 Content-Type 响应头是否正确。
解决方式：- 在服务器（如 Apache、Nginx）配置中添加对应 MIME 类型
- 联系托管服务商确认静态资源类型支持
