How to detect mp4 video orientation through Javascript

Question

I'm using HTML5 video tag to link to various mp4 videos on Amazon S3 for playback. However, all the videos are played back in landscape even though some are recorded in portrait (from iOS devices).

When I download the actual videos and play them with QuickTime, they are played with the correct orientation.

My question is is there a way to detect mp4 video orientation using Javascript and play it with the correct orientation? I'm using AngularJS as well, and I couldn't find any directives that relates to this.

I did find

https://hacks.mozilla.org/2011/01/zooming-and-rotating-for-video-in-html5-and-css3/

which explained how to rotate a video, but not on detection.

Thanks for the help!

I know one can read the metadata for a mp4 file and find out the rotation attribute, but still wondering how to do that via Javacript. — Luke, Apr 12 '14 at 13:36
It has been 6 years and still no answer. And today I am stuck on this point. — Arslan Ameer, Sep 09 '20 at 07:32

score 0 · Answer 1 · answered Feb 28 '22 at 09:15

It is simple approach but it works for me :-

  var video = document.getElementById('ID_OF_YOUR_VIDEO_ELEMENT');

  video.videoHeight; // returns the intrinsic height of the video
  video.videoWidth; // returns the intrinsic width of the video
  if(video.videoHeight < video.videoWidth)
  {
    video_landscape = "true";
  }
  else
  {
    video_landscape = "false";
           /*OR*/
    /*video_portrait = "true"*/
  }

How to detect mp4 video orientation through Javascript

1 Answers1