必须设置poster属性提供有效封面图，配合aspect-ratio锁定宽高比、absolute定位覆盖层，并添加playsinline等属性禁用移动端自动全屏。
怎么让 <video></video> 标签显示成带预览图的卡片
直接用 <video></video> 默认渲染，没有缩略图、没标题、没遮罩层，根本不像“卡片”。关键不是加样式，而是先让视频有可展示的封面——poster 属性必须设，否则浏览器不会主动加载首帧，CSS 再漂亮也是一片黑或空白。
实操建议：
-
poster值必须是有效图片 URL（本地路径也行），推荐尺寸至少 640×360，避免拉伸模糊 - 别依赖
preload="metadata"来“自动取帧”，它不保证生成可用封面，poster是唯一可靠方式 - 如果视频源支持 CORS（比如自己服务器的 MP4），可配合
preload="auto"提前加载，但依然要配poster
CSS 卡片布局：宽高比固定 + 遮罩文字怎么不压住播放按钮
视频卡片最常破形——手机上变扁、文字溢出、播放图标被遮挡。核心是用 aspect-ratio 锁定比例，再用 position: relative 做容器，所有覆盖层（标题、时长、播放图标）用 position: absolute 定位，而非浮动或 flex 堆叠。
常见错误现象：video 设了 width: 100% 但没设 height，导致父容器塌陷；或用 object-fit: cover 后文字位置漂移。
实操建议：
- 给
<video></video>父容器（比如<div class="video-card">）设 <code>aspect-ratio: 16 / 9，再设width: 100%，高度自动适应 - 播放图标用伪元素
::after或独立<div>，定位在底部居中，<code>bottom: 12px而非top: 50%，避免和标题重叠 - 标题文字用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止换行撑开卡片 - 直接写死
<video controls></video>，不要用 JS 控制显隐，否则移动端可能失效（iOS Safari 对动态controls支持差） - 想隐藏默认控件、自定义播放按钮？那就彻底去掉
controls，用.play()+.pause()手动控制，并监听playing和pause事件来切换 UI 状态 - 注意：调用
.play()必须由用户手势触发（如 click），否则会被浏览器静音拦截，poster也就卡住不动 - 加属性
playsinline（iOS 必须）和webkit-playsinline（旧版 iOS），缺一不可 - 确保 video 在 DOM 中不是孤立节点，外层包裹
<div> 并设 <code>cursor: pointer，否则某些安卓机型仍会拦截点击 - 不要给
<video></video>设width: 100vw或position: fixed，这些会触发浏览器强制全屏逻辑
点击播放时，怎么隐藏 poster 图并显示控件
很多人以为设了 controls 就完事，结果点击后 poster 还挂着，控件也不弹——因为 poster 只在未播放、未加载完成时生效；一旦调用 .play() 或用户点击，浏览器会立即切换到视频帧，但控件是否显示，取决于 controls 属性是否存在，且不能靠 JS 动态增删来“触发”显示。
实操建议：
移动端点一下就全屏？怎么禁掉这个行为
iOS Safari 和部分安卓浏览器默认点击 <video></video> 就唤起全屏播放器，这不是 bug，是策略——但对卡片式布局就是灾难。禁用方法非常有限，且必须组合使用。
实操建议：
真正难处理的是微信内置浏览器——它会忽略 playsinline，只能靠引导用户点击右上角「在浏览器中打开」来绕过。这点没法纯前端解决，得提前在产品侧留余地。
