17370845950

video标签黑屏主因是编码格式不匹配、服务器Content-Type错误、移动端自动播放限制及缺少错误监听；需检查H.264+AAC编码、配置video/mp4类型、添加muted属性、绑定onerror事件并按顺序排查。

video 标签黑屏，先看是不是编码格式不匹配

绝大多数黑屏问题根本不是代码写错了，而是视频文件本身不被浏览器解码——比如你用 Xvid 或 MPEG-2 编码的 .mp4 文件，浏览器能播声音但画面全黑，因为 HTML5 只认 H.264（AVC）视频流 + AAC 音频流的组合。

• 用 ffprobe input.mp4 检查编码：确认 codec_name 是 h264（不是 mpeg4、av1 或 vp9）且音频是 aac
• 不放心就重封装：用 FFmpeg 强制转成标准兼容格式：

  ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -c:a aac -movflags +faststart output.mp4

• baseline Profile 是 iOS 和旧安卓设备的关键；+faststart 让视频头移到文件开头，避免加载卡顿

服务器没返回正确的 Content-Type 就会黑屏

哪怕视频文件完全合规，如果 Web 服务器返回 Content-Type: application/octet-stream 或空着不设，iOS Safari 和部分 Android 浏览器直接拒绝解码，只留黑框。

• 检查响应头：在 Chrome DevTools 的 Network → Headers 里找 Content-Type，MP4 必须是 video/mp4
• Nginx 配置示例（加在 http 或 server 块内）：

  types {
      video/mp4 mp4;
      video/webm webm;
      video/ogg ogg;
  }

• Apache 用户加一行到 .htaccess：

  AddType video/mp4 .mp4

移动端自动播放触发黑屏，别硬上 autoplay

iOS 和 Android Chrome 对有声音的自动播放做了严格限制：未用户交互就调 play() 会静音、失败甚至黑屏。更糟的是，某些机型在 autoplay + loop 下首次渲染就卡死帧。

• 去掉 autoplay 属性，改用用户点击后手动触发：

  document.querySelector('video').play().catch(e => console.warn('Auto-play prevented:', e));

• 务必加 muted 属性（即使你本意要声音），否则 iOS 直接拒播：
• 用 poster 属性兜底：，避免白屏/黑屏空白期

监听错误比猜更容易定位黑屏原因

黑屏时控制台未必报错，但 error 事件一定会触发。不监听它，等于放弃第一手线索。

立即学习“前端免费学习笔记（深入）”；

• 给 绑定 onerror 并打印 error 对象：

  video.addEventListener('error', () => {
    console.error('Video error:', video.error?.code, video.error?.message);
  });

• 常见 code 值：MediaError.MEDIA_ERR_DECODE（解码失败）、MEDIA_ERR_NETWORK（404 或 CORS）、MEDIA_ERR_SRC_NOT_SUPPORTED（格式不支持）
• 顺手加个 canplay 监听，确认资源加载完成再移除 loading 状态，避免“闪黑”

真正卡住人的，往往不是某一个配置项，而是多个条件叠加：比如服务器 MIME 错了 + 视频用了 AV1 编码 + 移动端没加 muted —— 这时候只改其中一项，黑屏照旧。排查时得按顺序过一遍，别跳步。