这篇文章探讨了网页中视频嵌入时指定宽高比的问题。作者发现即使设置了正确的像素宽高比（如1920×1080），某些视频仍无法正确填充预留空间，导致布局偏移。这揭示了"方形像素"在网页渲染中可能并不总是真正保持方形比例的现象。

标题：当方形像素不再"方"：视频显示比例背后的秘密

作者：Alex Chan 发布时间：2025年12月5日

核心内容：

1. 问题发现

• 作者在网页中嵌入视频时发现预设的宽高比（如1920×1080）与实际显示不符
• 视频加载后会出现黑边或页面重排问题

2. 三个关键比例概念 (1) 存储宽高比（SAR）：视频原始帧的像素分辨率 (2) 像素宽高比（PAR）：单个像素的宽高比例

• PAR<1：纵向像素
• PAR=1：方形像素（标准）
• PAR>1：横向像素 (3) 显示宽高比（DAR）：实际观看尺寸，计算公式为DAR = SAR × PAR

3. 实际案例

• 以NASA"毅力号"火星着陆视频为例：
  • 存储分辨率：1920×1080
  • 像素比例：45:64
  • 实际显示宽度：1920×(45/64)=1350像素
• 原始帧截图显示圆形降落伞被拉伸，应用PAR后才显示正常

4. 解决方案

• 旧Python代码仅获取SAR导致误差
• 新方案使用ffprobe工具获取精确数据：
  • 支持JSON格式输出
  • 使用Fraction模块避免浮点误差
  • 自动处理未设置PAR的情况（默认为1）

5. 实践建议

• 网页布局应使用DAR而非SAR
• 非方形像素虽少见但需重视
• 修正后成功消除页面跳动问题

技术细节： - 涉及工具：QuickTime Player、ffprobe、ffmpeg - 代码改进：增加像素比例计算，使用round()精确取整 - 特殊处理：垂直视频（如YouTube Shorts）常见非方形像素情况

（注：已过滤作者个人信息、网站导航等非技术内容，保留核心技术说明和解决方案）

以下是评论内容的总结：

1. 非正方形像素的普遍性

   • 多位评论者指出非正方形像素在视频领域很常见
   • "Before HD, almost all video was non-square pixels. DVD is 720x480"（HD之前几乎所有视频都是非正方形像素）
   • "720p Plasma TVs had input resolutions of 1024x768 - the pixels themselves were rectangular"（720p等离子电视的输入分辨率是1024x768 - 像素本身就是长方形）

2. 类似现象的比较

   • 评论者将这种现象与其他技术进行类比
   • "this sounds like a digital version of the anamorphic lens/system"（这听起来像是变形镜头系统的数字版本）
   • "reminded me of retina screenshots on mac...the stored pixels don't always match what you see"（让我想起Mac的视网膜截图...存储的像素与屏幕显示并不总是一致）

3. 像素本质的讨论

   • 关于像素本质的理论探讨
   • "A Pixel Is Not A Little Square"（像素不是小方块）
   • "pixels are never square. Squares are an artifact of nearest sampling"（像素从来不是方的，方形是最近采样的人为产物）

4. 技术复杂性

   • 多位评论者强调技术实现的复杂性
   • "everything is more complicated than you first think"（一切事物都比初看时复杂得多）
   • "SAR vs DAR is what i had to learn when working with ffprobe"（在使用ffprobe时必须学习SAR和DAR的区别）

不同观点保持平衡，既包含具体技术实例（DVD分辨率、等离子电视），也有理论探讨（像素本质），还有与其他技术的类比（变形镜头、视网膜显示）。