最简可用的标签需包含src或及至少一个兼容格式，推荐用列MP4和WebM，加controls、muted（自动播放时）、playsinline（iOS）和poster，并确保服务器返回正确MIME类型与Accept-Ranges响应头。
HTML5 的 标签本身就能直接播放视频，不需要额外插件，但实际用起来常卡在“点开没画面”“报错 MediaError”“iOS 不自动播放”这些地方——核心问题不是标签写不写得出来，而是资源路径、格式兼容性、属性组合和平台限制没对齐。
怎么写最简可用的
最基础能跑通的写法必须包含 src（或
-
src属性只支持单个地址，适合确定唯一格式且兼容性已验证的场景 - 更稳妥用
- 务必加
controls，否则默认无播放控件；不加preload时多数浏览器会默认设为metadata，但不要依赖它
为什么加了 src 还是黑屏或报错 ERR_BLOCKED_BY_RESPONSE
常见于本地双击 HTML 文件打开，或服务器未正确返回视频 MIME 类型。浏览器拒绝加载类型不匹配或响应头缺失的资源。
- 本地文件协议（
file://）下 Chrome 禁止加载视频，必须起本地服务（如 Python 的python -m http.server） - 服务器需返回正确的
Content-Type：MP4 是video/mp4，WebM 是video/webm，缺失会导致 Safari 直接失败 - 检查 Network 面板里视频请求的 Response Headers，确认有
Accept-Ranges: bytes，否则拖动进度条会失败
iOS 和 Android 上自动播放为啥失效
移动端浏览器（尤其 iOS Safari）强制要求视频满足“静音 + 用户手势触发”才能自动播放，这是硬性策略，绕不过。
立即学习“前端免费学习笔记（深入）”；
-
autoplay单独写没用，必须配合muted： - 想“先静音自动播，再点一下取消静音”，得用 JS 在用户点击后调用
video.play()并移除muted，但此时若用户未交互过，仍会被拒 - Android Chrome 对
autoplay宽松些，但新版也趋严；微信内置浏览器额外封禁部分自动播放行为
poster、preload、playsinline 这几个属性到底要不要加
它们解决的是体验细节，但漏掉容易引发具体问题：
-
poster是视频第一帧的占位图，不加的话 iOS 下可能显示黑块，安卓部分机型显示默认图标 -
preload值为none/metadata/auto，移动端建议显式设metadata，避免流量浪费；桌面端设auto也不保证预加载全部数据 -
playsinline是 iOS 必加项，否则视频点开会全屏跳转，网页布局被破坏；安卓部分浏览器也认这个属性
真正难的不是写出标签，是每次换环境都要重新核对 MIME 类型、检查是否被跨域拦截、确认移动端是否静音、验证 playsinline 有没有生效——这些点散落在不同平台文档里，但实际调试时往往卡在同一行 上十几分钟。
