如何在HTML表格中添加视频封面：结合IMG与VIDEO标签
最简单可靠的视频封面方案是直接在表格单元格中使用<img>标签，指向预设封面图（如cover.jpg），无需JS或video的poster属性，兼容性好、加载快、不触发自动播放或权限弹窗。
用 <img> 作为视频封面最简单可靠
直接在表格单元格里放 <img> 标签，指向你准备好的封面图（如 cover.jpg），这是绝大多数场景下的首选。浏览器加载快、兼容性好、不会触发自动播放或权限弹窗。不需要 JS，也不依赖 <video> 的 poster 属性——后者在某些旧版 Safari 或嵌入 iframe 场景下会失效或显示空白。
常见错误是试图只靠 <video poster="..."></video> 渲染封面，却没给 <video> 设定宽高，导致表格塌陷或布局错乱。更糟的是，在 Chrome 120+ 中，若 <video> 没加 muted 和 autoplay，poster 可能压根不显示。
- 封面图建议尺寸与目标视频分辨率一致（如 1280×720），避免拉伸失真
- 路径用相对路径更稳妥：
<img src="assets/cover-01.jpg" alt="演示封面"></li><li>加 <code>width
和height属性（或 CSS）控制尺寸，防止表格抖动
<video> 的 poster 属性仅在特定条件下生效
poster 不是“封面替代方案”，而是 <video> 加载过程中的临时占位图。它只在以下条件同时满足时才可见：
-
<video>标签已渲染，且未开始播放（即paused === true） - 视频资源可访问（HTTP 200，CORS 允许），否则空白
- 浏览器支持该图片格式（WebP 在 IE 完全不支持，部分安卓 WebView 对 AVIF 无反应）
- 没有 JS 脚本在加载后立即调用
play()（哪怕加了preload="none"）
示例写法（注意属性顺序和静音）：
<video width="320" height="180" poster="cover.webp" muted autoplay playsinline> <source src="demo.mp4" type="video/mp4"></video>漏掉
muted，iOS Safari 会拒绝播放并隐藏 poster；漏掉 playsinline，某些微信 WebView 会强制全屏，封面一闪即逝。表格中混合使用 <img> 和 <video> 的 DOM 结构要点
不要把 <video> 和 <img> 并列放在同一 <td> 里指望“自动切换”——它们不会互斥显示。真要实现点击封面播放视频，得靠 JS 控制显隐，而不是靠 HTML 原生行为。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：用
<div class="video-container">包裹<img>和<video>，初始只显示<img>，display: none掉<video> - 点击
<img>后，隐藏<img>、显示<video>并调用play() - 务必监听
video的ended事件，播完后切回<img>，否则用户无法二次播放 - 表格行高由内容撑开，所以
<video>必须设固定height，否则换出封面后表格高度突变
移动端微信/企业微信里封面不显示的典型原因
不是代码写错了，而是平台限制：微信内置浏览器对 <video> 的 poster 渲染极其保守。实测发现，即使 HTML 完全合规，只要视频源是跨域（比如 CDN 域名不同于当前页面）、或 poster 图片用了 WebP 格式、或 <video> 外层没加 data-ratio 属性，封面就大概率白屏。
最稳解法：放弃 poster，改用带 onclick 的 <img>，点击后动态插入 <video> 标签（而非提前写死）。这样既绕过预加载限制，又能确保封面始终可见。
容易被忽略的一点：微信里 <video> 的 controls 属性常被忽略，但若没加，用户根本不知道能点哪播放——而封面图本身又没默认交互提示，结果就是“看起来像张静态图”。
