Video orientation metadata ignored before playback

[aforcier]

Original ref: https://github.com/wordpress-mobile/WordPress-Android/pull/3626#issuecomment-173001646

The editor ignores orientation metadata . The issue affects the Android Chromium browser also.

demo video

Essentially what's happening is that when loading the video params and the poster image, the videoWidth and videoHeight params of the video element have their literal value, not corrected for orientation (and the orientation information is not present at all). So, in the example case above, the video is treated as if it's a landscape video, and the container is forced to that size. The thumbnail is resized to fit within that container.

Upon playback, the video is further processed, and the orientation data applied. videoWidth and videoHeight exchange values, and the video is played with its proper size and orientation.

The fix for this will likely involve forcing the video container to match the size of the poster image (where available), corrected for the screen size (right now we rely on height/width: auto; it looks like we'll have to switch to manual assignment).

This bug also depends on the Android version and OEM WebView tampering; from a quick test I found that the bug doesn't happen on an API18 Samsung S3, for example.

On the whole this has fairly low priority. Even when the videos have orientation data, the playback has the correct orientation and a poster image is still shown to the user (though not at the correct size).

[aforcier]

Update: While videos uploaded directly from an Android device seem to be unaffected, any portrait videos uploaded to Google Photos will be rotated and get orientation metadata, and will experience this bug when they're uploaded to the Media Gallery and opened in the editor.

[aforcier]

The easiest way to check if a video will cause this bug is to open it in Firefox (Firefox ignores orientation metadata and will play that video sideways).