JS detects wrong width and height for one particular .mp4 file

Question

My issue is that JavaScript is reporting wrong width and height for one particular mp4 file.

This is the code I'm using to find out video width and height (simplified):

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

I am not sure if something is wrong with metadata of the file, but it gets more interesting:

1. UNIX systems recognize width and height CORRECTLY (607x1080)
2. Windows recognizes width and height INCORRECTLY (1080x1080)
3. Chrome on both platforms (Windows and Mac) recognizes width and height INCORRECTLY (1080x1920)

Here's quick DEMO I created (this code recognizes width and height properly for all videos that I tried except this one):

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

And here and you can download video file that's causing problems:

https://share.getcloudapp.com/Jru70Lgl

Thanks in advance for any help on resolving this mystery!

Answer 1

UNIX systems recognize width and height CORRECTLY (607x1080)

Windows recognizes width and height INCORRECTLY (1080x1080)

Are you ready for this? Both are correct and one is wrong, depending on your definition of rite and wrong.

Run this command: MP4Box -diso -std ezpz-Retargeting-Stories-Tiny-Cup_Spoon.mp4 2>&1 | less

You will see:

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

and

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

you see, there are codecs and there are containers. Think of it like a letter and an envelope. The envelope can contain multiple letters inside. The envelope may have an address on the outside, but when you open it up, the letter has a different address.

MP4 is an envelope that can contain multiple letters. For example, it may have audio tracks, video tracks, text tracks, data tracks, etc. They are separate things, but they are combined into the same file (envelope).

In this case the container (mp4/envelope) says the resolution is 607.5x1080 (TrackHeaderBox). But the letter inside (codec) says the resolution is 1080x1080 (AVCSampleEntryBox). So which is correct?

Windows (CORRECTLY) recognizes width and height as 1080x1080 (according to the codec) and UNIX (CORRECTLY) recognizes width and height as 607x1080 (according to the container). The difference is what YOU want to trust as the source of truth when presented with conflicting information.

In this specific case, My personal belief is that windows is MORE correct than Unix in that the decoder is a better source of truth than the render stage.

TLDR. The file is bad. Fix the file so the codec and the container match. Welcome to video on the internet!