1

So I have this structure:

<div style="width: 700px; height: 400px;">
   <video style="width: 100%; height: 100%">
</div>

I need to know, after the video is loaded, how can i find out the original dimensions of the video, or at least the aspect ratio, the video duration, etc.

Is this possible? how?

André Alçada Padez
  • 10,987
  • 24
  • 67
  • 120

2 Answers2

2

Here you go - I guess the property names speak for themselves:

var video = document.getElementById('video');
console.log(video.duration);
console.log(video.videoHeight);
console.log(video.videoWidth);

The aspect ratio can be calculated by the width and height.

From w3.org: 4.8.6 The video element:

video.videoWidth / video.videoHeight: These attributes return the intrinsic dimensions of the video, or zero if the dimensions are not known.

insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
0

In the video tag just add the attribute controls to show the deails

Example

<div style="width: 700px; height: 400px;">
    <video style="width: 100%; height: 100%" controls>
        <source src="movie.mp4" type="video/mp4"/>
    </video>
</div>

Hope this helps

Sudharsun
  • 741
  • 6
  • 23