object-fit: cover 是解决视频黑边最可靠方案，因其按比例缩放并裁切边缘，确保无黑边且不失真，但需配合明确宽高或 aspect-ratio，并作用于 video 元素本身。
object-fit 是解决 HTML5 video 黑边最直接有效的 CSS 属性，但选错值或忽略容器约束，反而会让画面拉伸、裁切过度或黑边照旧。
为什么 object-fit: cover 多数情况下更可靠
当视频原始比例（如 16:9）和容器尺寸不一致时，object-fit: contain 会完整显示全部画面，必然留黑边；object-fit: fill 强行拉满，人物变胖变矮；而 object-fit: cover 按比例缩放并裁切边缘，确保容器内无黑边且不失真。
- 必须配合明确的宽高设置（如
width: 100%; height: 400px或使用aspect-ratio） - 裁切位置默认居中，若关键内容偏上/偏下，需额外加
object-position: top等微调 - 部分老旧 Android WebView（如 Android 4.4）不支持
object-fit，需降级 fallback
容器宽高比不匹配时，aspect-ratio 比固定 height 更健壮
硬写 height: 56.25vw 或 height: 225px 容易在响应式场景下失效。用 aspect-ratio: 16 / 9 让浏览器自动维持比例，再叠 object-fit: cover，能避免因父容器拉伸导致的二次黑边。
- 仅支持现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+），IE 和旧 Edge 完全不支持
- 若需兼容，可用伪元素 + padding-bottom 技巧模拟，但需额外 DOM 结构
-
aspect-ratio对video本身无效，必须作用于其直接父容器
Video.js / vue-video-player 等封装库要改内部 video 元素的 object-fit
这些库通常把 video 标签包在多层 div 里，直接给外层容器设 object-fit 没用。必须穿透到原生 video 元素生效。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- Video.js：初始化时传
html5: { video: { objectFit: 'cover' } }，或用 CSS 选择器.video-js .vjs-tech显式覆盖 - vue-video-player：在
style="object-fit: cover"不起作用，得用深度选择器::v-deep .video-js .vjs-tech（Vue 2）或:deep(.vjs-tech)（Vue 3） - 萤石云等 RTMP/HLS 流，有时因首帧未加载完成，
object-fit会短暂失效，建议加preload="metadata"
黑边其实是视频自带的？那 CSS 解决不了
如果黑边在播放器全屏后依然存在，且导出的 MP4 文件用 VLC 打开也有——说明是视频帧本身含黑边（比如拍摄时用了遮幅滤镜，或剪辑时错误加了黑色背景）。这时 object-fit 再怎么调都无效。
- 前端无法“擦除”像素，只能靠服务端转码裁切（如 FFmpeg 的
crop滤镜）或客户端用 Canvas 逐帧处理（性能差，仅限小范围） - 简单验证方法：右键视频 → “另存为”，下载后用系统播放器打开，看是否仍有黑边
- 批量处理推荐用 FFmpeg 命令：
ffmpeg -i in.mp4 -vf "crop=1280:720:0:0" out.mp4，其中宽高需根据实际黑边尺寸计算
真正卡住人的往往不是不知道 object-fit，而是没分清黑边来源——是容器适配问题，还是视频数据本身带黑边。前者改 CSS 就行，后者必须动源文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
