黑屏主因是浏览器自动播放策略、MIME类型错误、跨域限制或编解码不兼容；需检查autoplay+muted、Content-Type、CORS头、H.264+AAC编码及用户手势触发play()。
video 标签加了 src 却黑屏，先查 preload 和 autoplay 是否被浏览器拦截
现代浏览器（Chrome、Edge、Safari）默认禁止无用户交互的自动播放，尤其带声音的视频。即使写了 autoplay，只要没加 muted，多数情况会静音失败+黑屏。
-
autoplay必须配合muted才大概率生效，例如： -
preload="auto"不保证预加载完成，部分移动端仍可能延迟渲染；可试preload="metadata"减少首帧等待 - 若依赖 JS 触发播放，需在用户手势（如 click/tap）回调中调用
play()，否则 Promise 会 reject
src 地址能访问但没画面？检查 MIME 类型和跨域头
服务器返回的视频文件必须带正确的 Content-Type 响应头，否则 Chrome 等浏览器直接拒绝解码——哪怕文件本身完好。
- MP4 应返回
video/mp4，WebM 是video/webm，Ogg 是video/ogg - 若视频放在不同域名或子域，服务端需返回
Access-Control-Allow-Origin: *（或具体域名），否则canplay事件不触发，video.readyState停在 0 - 本地双击打开 HTML 文件（
file://协议）时，Chrome 会禁用跨域请求，导致视频加载失败——务必用本地服务器（如python3 -m http.server）测试
有声音没画面？可能是编解码器不支持或分辨率超限
HTML5 视频不是“有格式就能播”，浏览器只支持特定编码组合。常见黑屏但有声的情况，多因编码器不兼容或尺寸异常。
- 优先用 H.264 + AAC 编码的 MP4，兼容性最广；避免 H.265（HEVC）、AV1（除非明确目标环境支持）
- 某些 Android 旧机型或 Safari 对超高分辨率（如 4K@60fps）支持差，尝试转为 1080p@30fps 再测
- 用
ffmpeg -i input.mp4 -vcodec libx264 -acodec aac output.mp4重编码可解决多数“能读元数据但不渲染”问题
video 元素渲染区域为空白？确认 CSS 和父容器状态
黑屏未必是视频问题，也可能是样式或布局导致元素不可见。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误设了
display: none、visibility: hidden或opacity: 0 - 父容器若设了
overflow: hidden且 video 尺寸超出，可能被裁剪成全黑 - 未设宽高时，
video默认宽高为 300×150，但若父容器width: 0或height: 0，实际渲染面积为 0 —— 显式设置width/height或aspect-ratio更可靠
src 能不能打开，先看 Network 面板里视频请求的状态码和响应头，再查控制台有没有 DOMException: play() failed 这类报错。 
