HTML表格添加视频封面：结合IMG与VIDEO标签
在HTML表格中添加视频封面，最稳妥的方法是使用标签直接引用封面图，避免使用的poster属性，因其在旧版Safari或iframe中常不显示。需设定宽高防止布局抖动。移动端微信中poster易失效，建议放弃poster，改用配合点击事件动态插入视频。
![]()
cover.jpg——浏览器加载速度那叫一个快，兼容性也没得挑，还不会瞎触发自动播放或者弹权限窗口。完全没必要折腾 Ja vaScript，也别死磕 poster 属性，后者在部分旧版 Safari 或者嵌入 iframe 的场景下就是个摆设，压根不显示。
一个常见的翻车案例是：代码里只写了个 muted 和 autoplay，那 poster 可能干脆不干活。
顺便说几个实用的配置要点：封面图尺寸最好跟视频目标分辨率保持一致，比如 1280×720，这样就不会拉伸变形。路径用相对路径比较稳妥，像 
width 和 height 属性来控制尺寸，不然表格加载时容易抖动。
poster 属性仅在特定条件下生效
千万别把 poster 当封面替代方案来使。它本质是 加载过程中的临时占位图，只在以下条件同时满足时才正常工作： 标签已经渲染但还没开始播（paused === true）；视频资源能访问（HTTP 200，CORS 允许），否则一片空白；浏览器得支持你用的图片格式（比如 WebP 在 IE 身上完全没戏，部分安卓 WebView 对 A VIF 也无动于衷）；并且没有脚本一加载完就调用 play()，哪怕你加了 preload="none" 也没用。
一个相对靠谱的示例写法是这样：
但要注意顺序和属性细节：忘了muted，iOS Safari 会直接拒绝播放，并且藏掉 poster；漏掉 playsinline，某些微信 WebView 会强制全屏，封面一闪就没了。
表格中混合使用 ![]()
指望把 比较推荐的做法是：用一个 绝大多数情况下，不是代码哪里写漏了，而是平台自己在搞限制。微信内置浏览器对 最稳的解法：干脆放弃 还有一个容易被忽略的坑：微信里 和 里实现“自动切换”，那是异想天开——它们不会互斥显示。要点击封面然后播放视频，得靠 Ja vaScript 控制显隐，别指望 HTML 原生行为来兜底。 都包起来，初始只显示那张图，视频则 display: none。用户点击封面后，藏图、显视频，然后调用 play()。别忘了监听 video 的 ended 事件，播完之后再切回封面，否则用户就没办法二次播放了。还有个小细节：表格行高是靠内容撑开的，所以视频必须设固定高度，不然换出封面后表格高度会突然蹦跶一下。
移动端微信/企业微信里封面不显示的典型原因
的 poster 渲染极其保守。实测下来，即使 HTML 完全合规，只要视频源是跨域的（比如 CDN 域名跟当前页面不同）、或者封面图用了 WebP 格式、又或者 外层没加 data-ratio 属性，那封面多半就是个白屏。poster，改用带 onclick 的 标签，而不是一开始就写死在 HTML 里。这样既能绕过平台预加载的限制，又能确保封面永远可见。 的 controls 属性经常被人忘掉。要是没加上，用户根本不知道点哪里才能播放——而封面图本身又没有默认的交互提示，最终结果就是：页面看起来像一张死气沉沉的静态图。