css grid 比 flexbox 更稳：设 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，卡片加 min-height: 320px；懒加载视频用 preload="metadata" 和 data-src，hover 300ms 后赋值并 load()；播放状态需监听 playing、pause、error；封面图需 srcset 适配 dpr，元数据须等 loadedmetadata 事件。
怎么让视频卡片在不同屏幕下都整齐排列
用 CSS Grid 比 Flexbox 更稳，尤其当卡片高度不一致时。Flexbox 容易因某张封面图加载失败或文字行数不同导致错行，Grid 能强制对齐行高。
- 设容器
display: grid，搭配grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，兼顾最小宽度和等分布局 - 给每张卡片加
min-height: 320px，避免文字少的卡片塌陷影响整体网格结构 - 慎用
grid-auto-rows: minmax(320px, auto)—— Safari 旧版本对这个支持不稳定，实测 iOS 14.5 下会忽略高度约束
点击播放前怎么避免重复请求视频资源
很多聚合页一进页面就预加载所有 <video></video> 的 src，造成带宽浪费和首屏卡顿。真正要做的，是懒加载 + 按需解码。
- 所有
<video></video>标签初始只设preload="metadata"，不设autoplay或src - 把真实地址存在自定义属性里，比如
- 用户 hover 卡片 300ms 后再用 JS 把
data-src赋给src，并调用load()；点击播放时才触发play() - 注意：iOS Safari 对非用户手势触发的
play()会静音且拒绝播放，必须绑定在click事件里
如何让“正在播放”状态准确同步到 UI
单纯监听 play 事件不够 —— 视频可能因网络中断、格式不支持、CORS 失败而静默失败，UI 还显示“播放中”就会误导用户。
- 监听
playing（真正在解码播放）和pause，而非仅play/pause - 加上
error事件兜底：一旦触发，清除当前播放器的src，重置 UI 状态，并提示“视频不可用” - 多个视频共用一个播放器实例时，切换前务必先调用
pause()和load()，否则新视频可能继承旧的缓冲状态，出现黑屏或音频残留
为什么聚合页的视频封面图总显得模糊
不是压缩率问题，而是尺寸没对齐设备像素比（dpr）。同一张 400×225 的图，在 iPhone 上实际渲染为 800×450 像素，但浏览器按 1x 渲染，导致拉伸模糊。
- 为
<img>添加srcset：比如srcset="cover@1x.jpg 1x, cover@2x.jpg 2x" - 后端生成封面时，按 1x/2x/3x 三档输出，命名规则固定，前端根据
window.devicePixelRatio动态选图更稳妥 - 避免用 CSS 缩放高清图：比如
width: 100%; height: auto;配合 4k 封面，浏览器缩放算法远不如服务端生成合适尺寸来得清晰
duration、videoWidth 这些属性必须等 loadedmetadata 事件后才能读取，早于它取值就是 NaN 或 0。别信文档里写的“大部分浏览器支持”，Chrome 115+ 和 Firefox 120+ 对跨域视频的元数据延迟明显变长。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
