video黑屏或报错主因是资源不可达或格式不被支持，需检查url可访问性、编码格式（如h.264/mp4）、content-type响应头；autoplay需加muted或用户交互后调用play()；source顺序应按兼容性降序排列；ios需加playsinline并避免touch-action限制。
video 标签加了 src 却黑屏或报错 MediaError
常见现象是页面上只显示一个空白区域，控制台抛出 MediaError 或提示 Failed to load resource。根本原因往往不是代码写错，而是媒体资源本身不可达或格式不被浏览器支持。
- 先用浏览器直接访问
src地址（比如粘贴到新标签页），确认视频文件能正常下载；404 或跨域拒绝（CORS）是最常见源头 - 检查视频编码：HTML5 原生支持的只有
MP4 (H.264 + AAC)、WebM (VP8/VP9 + Vorbis/Opus)、Ogg (Theora + Vorbis)；用ffprobe video.mp4查看实际编码，别只看后缀名 - 服务端必须返回正确的
Content-Type：MP4 要是video/mp4，WebM 是video/webm，否则 Safari 和部分 Chrome 版本会静默失败
设置了 autoplay 但视频不自动播放
现代浏览器（Chrome ≥66、Firefox ≥66、Safari ≥11）默认禁止无用户交互前提下的音视频自动播放，尤其带声音的。这不是 bug，是策略限制。
- 最稳妥的解法是加
muted属性：<video autoplay muted></video>—— 大部分浏览器允许静音自动播放 - 如果必须带声，得等用户第一次点击/触摸后，再用 JS 调用
play()；直接在DOMContentLoaded里调用会失败并抛NotAllowedError - 注意
play()返回 Promise，需处理拒绝：video.play().catch(e => console.warn("Autoplay prevented:", e))
用 source 标签提供多格式，但始终 fallback 到第一个
浏览器按 source 出现顺序尝试加载，遇到第一个格式支持且网络可访问的就停，不会继续往下试。所以顺序和属性设置直接影响兼容性。
- 把兼容性最强的放最前：通常是
type="video/mp4"（H.264），再跟video/webm，最后video/ogg -
type属性必须写准，且与实际文件编码一致；写成type="video/mp4"但文件是 VP9 编码的 WebM，浏览器会跳过 - 不要依赖
canPlayType()的返回值做判断后再插入source—— 它只是预估，实际加载时仍可能失败，不如直接声明多个source
移动端 iOS Safari 视频无法全屏或手势失效
iOS Safari 对 video 有额外限制：默认强制内联播放，且仅当满足特定条件才允许进入原生全屏。
立即学习“前端免费学习笔记（深入）”；
- 必须加
playsinline webkit-playsinline属性才能在页面内播放（否则 iOS 10+ 会强制跳原生播放器） - 要支持用户双指缩放、拖拽进度条等手势，需确保父容器没设
touch-action: none或pointer-events: none - 全屏 API（
requestFullscreen()）在 iOS 上对video无效；只能靠用户点击右下角全屏按钮，或用webkit-enter-fullscreen（已废弃，不推荐依赖）
