video 标签的 poster 属性必须是绝对或相对有效路径，浏览器不校验存在性，错误路径导致黑屏；本地 file:// 路径在 HTTP 下必 404；需确保同域可访问、大小写敏感、避免空格中文；动态更换须重建 video 元素或用 CSS 遮罩层；poster 不受 object-fit 影响，应匹配视频宽高比并用 CSS 约束容器尺寸。
video 标签的 poster 属性必须是绝对或相对有效路径
HTML5 标签通过 poster 属性指定封面图，但浏览器不会校验该路径是否存在——路径错误时静默失败，只显示黑屏或默认控制栏空白。常见错误是把本地图片路径（如 file:///xxx.jpg）直接写进 poster，在 HTTP 服务下必然 404。
- 确保封面图已上传到网站同域可访问位置，例如放在
/assets/cover.jpg - 路径区分大小写，
cover.JPG和cover.jpg在 Linux 服务器上不是同一个文件 - 避免使用空格或中文名，编码后易出错，推荐用
cover-main.jpg这类命名 - 如果用构建工具（如 Vite、Webpack），需确认静态资源是否被正确复制到输出目录
替换封面时不要依赖 JS 修改 poster 属性
直接给 video 元素设置 poster 属性（如 video.poster = 'new.jpg'）在多数浏览器中无效：Chrome、Firefox 均不触发重新加载封面，只有首次加载时生效。这不是 bug，而是规范行为——poster 是初始化属性，非响应式状态。
- 若需动态换封面（如多集视频切换），必须重新创建
元素并插入 DOM - 更稳妥的做法是用 CSS 遮罩层：
img - 注意：CSS 覆盖方案需手动监听
play、pause、ended事件来控制显隐
poster 图片尺寸与 video 容器不匹配导致拉伸或裁剪
浏览器对 poster 图像不做自动适配处理，它会按 元素的宽高（或 CSS 设置）直接拉伸填充，常出现模糊或比例失调。尤其在响应式布局中，video 宽度设为 100% 但高度未约束时，poster 渲染不可控。
- 优先用 CSS 控制容器尺寸，例如固定宽高比：
.video-container { aspect-ratio: 16/9; } - poster 图片建议导出为 1280×720 或 1920×1080，宽高比严格匹配视频源（如 16:9 或 4:3）
- 避免仅靠
object-fit: cover修复——该属性对poster无效，只作用于视频画面本身 - 可加内联样式强制尺寸：
，但需配合父容器约束
@@##@@
真正麻烦的是混合了自定义控件、移动端全屏逻辑和懒加载的场景——此时 poster 的显示时机、销毁时机、内存释放都得手动兜底，稍有遗漏就会残留旧封面或触发重复请求。
立即学习“前端免费学习笔记（深入）”；
