HTML5视频黑屏或报错主因是资源链路问题而非浏览器不支持，需重点排查src路径、MIME类型配置、编码兼容性（推荐H.264+AAC）、跨域限制，并用canPlayType()检测格式支持。
HTML5 视频不需要“安装播放器”——浏览器原生支持 <video> 标签，只要视频格式兼容、MIME 类型正确、服务器配置得当，就能直接播放。
为什么点开 HTML5 视频页面却显示黑屏或报错？
常见原因不是浏览器不支持，而是资源链路断了。重点排查以下几点：
-
src路径错误（如相对路径写成./video.mp4但实际在/assets/video.mp4） - 服务器未配置正确的 MIME 类型：MP4 文件必须返回
video/mp4，否则 Chrome/Firefox 会拒绝加载 - 视频编码不兼容：浏览器只支持特定编码组合，例如 H.264 + AAC 是最稳妥的；H.265（HEVC）、AV1、VP9 在部分旧版浏览器中不可用
- 跨域限制：如果
<video>的src指向其他域名，且目标服务器没返回Access-Control-Allow-Origin，会静默失败
怎么确认浏览器是否真支持某个视频格式？
别查浏览器版本列表，直接用 JavaScript 调用 canPlayType() 方法判断：
const video = document.createElement('video');
console.log(video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')); // "probably"
console.log(video.canPlayType('video/webm; codecs="vp9, opus"')); // "maybe" 或 ""
注意：canPlayType() 返回 "probably" 表示高概率支持，"maybe" 表示不确定，空字符串表示不支持。不要依赖返回值做唯一判断，建议 fallback 到 MP4 + H.264。
立即学习“前端免费学习笔记（深入）”；
服务器端 MIME 类型怎么配才不出错？
这是最容易被忽略却导致 404 或静默失败的关键点。不同环境配置方式不同：
- Apache：在
.htaccess或虚拟主机配置中添加AddType video/mp4 .mp4、AddType video/webm .webm、AddType video/ogg .ogv - Nginx：在
http或server块中确保包含include mime.types;，并确认mime.types文件里有对应行（默认通常已有） - Node.js（如 Express）：无需额外设置，
res.sendFile()会自动根据扩展名推断 MIME；但若用res.send()流式传输，必须手动设res.set('Content-Type', 'video/mp4') - 本地开发用 VS Code Live Server？它默认不支持视频 MIME，换用
serve（npx serve）或 Python 的python3 -m http.server更可靠
HTML5 <video> 标签最小可用写法和兼容要点
不要一上来就堆属性。先保证能播，再加控制：
<video controls width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
关键细节：
- 至少提供一个
.mp4（H.264+AAC），覆盖 99% 主流浏览器 -
<source>顺序重要：浏览器按顺序尝试，遇到第一个能播的就停；把 MP4 放前面更稳妥 - 不要省略
type属性——虽然浏览器可探测，但加上后能跳过预加载失败的资源 - 如果视频需要自动播放（如 banner），必须加
muted：Chrome/Firefox 禁止有声自动播放，否则autoplay会被忽略
真正卡住人的往往不是语法，而是服务器返回的 Content-Type 错了，或者 FFmpeg 转码时用了浏览器不认识的 profile（比如 H.264 High Profile）。先用 curl -I 视频URL 看响应头，再用 ffprobe 视频文件 查编码参数，比反复改 HTML 有效得多。
