原生poster属性无降级机制，加载失败时浏览器静默忽略、不报错也不fallback；必须用js主动兜底，如通过dom插入同尺寸img作为fallback层，并在loadedmetadata事件中隐藏，播放失败时再显示。
原生 poster 属性没有降级机制，加载失败时浏览器静默忽略、不报错也不 fallback——所谓“备用图”，必须靠 JS 主动兜底。
为什么 poster 加载失败不会显示默认图
浏览器对 poster 的处理是“尽力而为”：请求返回 404、403、CORS 阻止、MIME 类型错误（如服务器返回 text/plain 而非 image/jpeg），都会导致空白，且控制台可能无提示。这不是 bug，是规范行为。
- 检查 Network 面板过滤
Img，确认poster请求状态码和Content-Type - 本地双击打开 HTML（
file://协议）下，所有现代浏览器都禁用poster加载 - 微信内置浏览器（X5 内核）会拦截带查询参数的 poster URL，比如
cover.jpg?v=1可能被静默丢弃
用 <img> 模拟 poster 降级层
比监听 error 更可靠：直接在 DOM 中放一个同尺寸 <img> 作为视觉 fallback，由 JS 控制显隐时机。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- HTML 结构：
<div class="video-wrapper"> <video poster="cover.jpg"></video><img src="cover.jpg" alt="" class="poster-fallback"> </div> - CSS 控制：
.poster-fallback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } - JS 触发隐藏：
video.addEventListener('loadedmetadata', () => { document.querySelector('.poster-fallback').style.display = 'none'; }); - 若视频播放失败（
onerror），可再把.poster-fallback显示回来
动态换封面时怎么避免内存泄漏
用户上传新封面后，用 URL.createObjectURL() 创建临时地址是常见做法，但不清理会导致内存持续增长。
- 每次调用
createObjectURL(file)后，必须保存返回值（如let url = URL.createObjectURL(file);） - 切换封面前，先执行
URL.revokeObjectURL(oldUrl)；页面卸载前也应统一清理 - 不要反复给
video.poster赋新值来“更新”封面——多数浏览器不重绘，且无法 revoke - 更稳妥的做法：始终只操作
<img class="poster-fallback">的src，并配对 revoke
真正难处理的不是“怎么设 poster”，而是“怎么让它在各种网络、缓存、内核差异下始终可见”。原生机制只管加载，不管成败；降级必须从 DOM 层开始设计，而不是等它失效了再补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
