JS 检测到一个特定 .mp4 文件的错误宽度和高度

Question

我的问题是 JavaScript 报告了一个特定 mp4 文件的错误宽度和高度。

这是我用来找出视频宽度和高度的代码（简化）：

// loadedmetadata event of video element
onLoadedMetadata(event) {
  videoWidth = event.srcElement.videoWidth;
  videoHeight = event.srcElement.videoHeight;
}

我不确定文件的元数据是否有问题，但它变得更有趣：

1. UNIX 系统可以正确识别宽度和高度 (607x1080)
2. Windows 无法正确识别宽度和高度 (1080x1080)
3. Chrome 在两个平台（Windows 和 Mac）上都无法正确识别宽度和高度 (1080x1920)

这是我创建的快速 DEMO（此代码可以正确识别除此之外的所有视频的宽度和高度）：

https://stackblitz.com/edit/angular-7ooyic

在这里，您可以下载导致问题的视频文件：

https://share.getcloudapp.com/Jru70Lgl

提前感谢您为解决这个谜团提供的任何帮助！

Answer 1

UNIX 系统可以正确识别宽度和高度 (607x1080)

Windows 无法正确识别宽度和高度 (1080x1080)

你准备好了吗？一个是对的，一个是错的，取决于你对礼与错的定义。

运行以下命令： MP4Box -diso -std ezpz-Retargeting-Stories-Tiny-Cup_Spoon.mp4 2>&1 | less

你会看到：

<TrackHeaderBox CreationTime="3662746977" ModificationTime="3662746977" TrackID="1" Duration="20020" Width="607.50" Height="1080.00">

和

<AVCSampleEntryBox DataReferenceIndex="1" Width="1080" Height="1080" XDPI="4718592" YDPI="4718592" BitDepth="24">

你看，有编解码器和容器。把它想象成一封信和一个信封。信封里面可以包含多个字母。信封外面可能有一个地址，但是当你打开它时，这封信有一个不同的地址。

MP4 是一个可以包含多个字母的信封。例如，它可能有音频轨道、视频轨道、文本轨道、数据轨道等。它们是独立的东西，但它们组合成同一个文件（信封）。

在这种情况下，容器 (mp4/envelope) 显示分辨率为 607.5x1080 (TrackHeaderBox)。但是里面的字母（编解码器）说分辨率是1080x1080（AVCSampleEntryBox）。那么哪个是正确的呢？

Windows（正确）将宽度和高度识别为 1080x1080（根据编解码器），而 UNIX（正确）将宽度和高度识别为 607x1080（根据容器）。不同之处在于，当出现相互矛盾的信息时，您希望将其作为真相的来源。

在这种特定情况下，我个人认为 windows 比 Unix 更正确，因为解码器是比渲染阶段更好的事实来源。

TLDR。文件不好。修复文件，使编解码器和容器匹配。欢迎观看互联网视频！