video标签的poster属性才是正解：它在视频加载前显示封面，与生命周期绑定，需显式设置宽高防变形，404时可用onerror降级，表格中应禁用autoplay并延迟加载以优化性能。
VIDEO标签的poster属性才是正解
直接用<img>往表格里塞封面图，本质是静态图片，和视频无关；真正能响应播放、控制、事件的封面，必须靠<video></video>自身的poster属性。它会在视频加载完成前、未播放时显示指定图片，且与<video></video>生命周期绑定——暂停、重载、错误状态都会触发它重新显示。
常见错误是把<img>和<video></video>并列写在单元格里，结果封面遮不住视频黑屏、点击播放后封面还残留、响应式布局错位。正确做法是只写一个<video></video>，用poster指定封面路径：
<td> <video controls poster="cover.jpg" width="320" height="180"><source src="demo.mp4" type="video/mp4"></source></video> </td>
表格单元格内VIDEO尺寸必须显式约束
表格默认不为<video></video>分配宽高，尤其在table-layout: auto下，poster图可能被压缩变形、拉伸溢出、或高度塌陷为0。不设width/height属性，或只设CSS宽高但没配object-fit，都容易导致封面比例失真。
-
width和height属性值建议用具体像素（如width="640" height="360"），避免百分比引发继承混乱 - 若需响应式，优先用CSS：
video { width: 100%; height: auto; }，但必须确保父<td>有明确宽度（如<code>min-width或width） - 封面图本身分辨率应匹配设定尺寸，否则
poster会被浏览器拉伸，模糊或留白
COVER图加载失败时VIDEO会黑屏，得加兜底逻辑
poster路径404或跨域限制时，<video></video>不会报错，但显示纯黑背景——用户看不出是没加载还是视频本身黑帧。这不是UI问题，是实际可用性断点。
解决方式不是换图，而是监听onerror并降级：
<video controls poster="cover.jpg" onerror="this.poster='fallback.jpg'"><source src="demo.mp4" type="video/mp4"></source></video>
注意：onerror只对poster资源有效，对<source></source>无效；fallback.jpg必须是同域可访问路径，且尺寸一致。
更稳妥的做法是服务端返回统一占位图（如SVG），或前端用fetch()预检posterURL再渲染<video></video>，但表格批量渲染时慎用，避免阻塞渲染。
VIDEO在TABLE中影响渲染性能，别滥用autoplay和preload
每个<video></video>即使没播放，只要DOM存在，浏览器就会解析poster、建立媒体资源上下文、预留解码器——表格里放10个带poster的<video></video>，首屏加载明显变慢，滚动卡顿。
- 禁用
autoplay和preload="auto"，改用preload="metadata"（只加载时长、封面、音轨信息） - 长列表场景下，用
IntersectionObserver延迟加载<video></video>：进入视口才插入真实<source></source>，之前只保留poster和空<video></video> - 若封面只是装饰、无需交互，真没必要用
<video></video>——用<img>+ 点击后动态创建<video></video>更轻量
真正需要封面和播放一体化的场景其实有限：比如后台管理的视频审核列表、课程目录页。其它多数情况，封面图+跳转链接就够了。别为了“看起来像视频”硬套<video></video>标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
