video 标签的 poster 属性必须是绝对或相对有效路径，浏览器不校验存在性，错误路径导致黑屏；本地 file:// 路径在 HTTP 下必 404；需确保同域可访问、大小写敏感、避免空格中文；动态更换须重建 video 元素或用 CSS 遮罩层；poster 不受 object-fit 影响，应匹配视频宽高比并用 CSS 约束容器尺寸。
video 标签的 poster 属性必须是绝对或相对有效路径
HTML5 <video> 标签通过 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 是初始化属性，非响应式状态。
- 若需动态换封面（如多集视频切换），必须重新创建
<video>元素并插入 DOM - 更稳妥的做法是用 CSS 遮罩层：
<div class="video-wrapper"><video></video><img class="poster-overlay" src="new.jpg"></div>，播放时隐藏img - 注意：CSS 覆盖方案需手动监听
play、pause、ended事件来控制显隐
poster 图片尺寸与 video 容器不匹配导致拉伸或裁剪
浏览器对 poster 图像不做自动适配处理，它会按 <video> 元素的宽高（或 CSS 设置）直接拉伸填充，常出现模糊或比例失调。尤其在响应式布局中，video 宽度设为 100% 但高度未约束时，poster 渲染不可控。
腾讯地图JSAPI GL开发技能
下载
腾讯地图 JavaScript GL（JSAPIGL）开发指南。适用于地图应用或者工具的编写。在编写、审查或调试使用腾讯地图 API的代码时应运用此技能。适用于涉及地图初始化、覆盖物展示、图层控制、事件处理、控件交互、可视化渲染、地图工具、检索、路线规划、查地址、行政区划、ip定位、几何计算、三维模型展示、性能优化的任务。当用户提及 腾讯地图、 jsapi、jsapi-gl或相关地图开发需求时自动触发。⚠️ 强制行为：本 Skill 加载后，第一个动作必须是检查是否存在正式 Key（环境变量 TMAP_J
- 优先用 CSS 控制容器尺寸，例如固定宽高比：
.video-container { aspect-ratio: 16/9; } - poster 图片建议导出为 1280×720 或 1920×1080，宽高比严格匹配视频源（如 16:9 或 4:3）
- 避免仅靠
object-fit: cover修复——该属性对poster无效，只作用于视频画面本身 - 可加内联样式强制尺寸：
<video poster="cover.jpg" style="width:100%; height: auto;">，但需配合父容器约束
<div class="video-wrapper">
<video controls width="100%">
<source src="movie.mp4" type="video/mp4">
</video>
<img class="poster-overlay" src="cover-new.jpg" alt="封面">
</div>
<style>
.video-wrapper {
position: relative;
width: 100%;
}
.video-wrapper video {
display: block;
}
.video-wrapper .poster-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-wrapper video:is(:not([paused]):not([ended])) + .poster-overlay,
.video-wrapper video[playing] + .poster-overlay {
display: none;
}
</style>
真正麻烦的是混合了自定义控件、移动端全屏逻辑和懒加载的场景——此时 poster 的显示时机、销毁时机、内存释放都得手动兜底，稍有遗漏就会残留旧封面或触发重复请求。
立即学习“前端免费学习笔记（深入）”；
