Client side Javascript get video width/height before upload

Question

I've been trying to piece together a combination of HTML5 video tag + the FileReader API but I haven't figured out how to get the dimensions of a video that a user is providing from their own computer.

Here is what I am referencing for width/ height:

HTML5 Video Dimensions

<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

But I want to know if it's possible to do this with a file from a user's computer (that they have selected via a normal input html tag).

Thanks!

`File` instance does not expose contents of underlying file content, save for MIME type at `.type` property, `.size`, `.lastModified`, and `.lastModifiedDate`. You can create a ` — guest271314, Apr 08 '17 at 08:00

score 9 · Accepted Answer · answered Apr 08 '17 at 18:28

A bit unclean solution using basic FileReader + Data URL.

<html>
  <head>
<style>
div {
    margin: 20px;
}
</style>
  </head>
  <body>
    <h1>Get Dimensions</h1>
    <div>
        <label for="load-file">Load a file:</label>
          <input type="file" id="load-file">
    </div>
    <div>
        <button type="button" id="done-button">Get me dimensions</button>
    </div>

    <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.js"></script>
    <script>
(function ($) {
  $('#done-button').on('click', function () {
    var file = $('#load-file')[0].files[0];
    var reader  = new FileReader();
    var fileType =  file.type;
    console.log("type", fileType);
    reader.addEventListener("load", function () {
      var dataUrl =  reader.result;
      var videoId = "videoMain";
      var $videoEl = $('<video id="' + videoId + '"></video>');
      $("body").append($videoEl);
      $videoEl.attr('src', dataUrl);

      var videoTagRef = $videoEl[0];
      videoTagRef.addEventListener('loadedmetadata', function(e){
        console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
      });

    }, false);

    if (file) {
      reader.readAsDataURL(file);
    }
  });

})(jQuery);
    </script>
  </body>
</html>

Nice solution. I suggest to use **object URL** instead of data URL. It's easier to write and more efficient to run. You can get it simply by: `URL.createObjectURL (file);`, then use it as the `src` attribute to create the ` — Márton Tamás, Apr 27 '18 at 15:35

score 4 · Answer 2 · answered Nov 05 '20 at 00:30

Here is a simple and fast solution to get a video's size before upload. It doesn't require any dependency.

const url = URL.createObjectURL(file);
const $video = document.createElement("video");
$video.src = url;
$video.addEventListener("loadedmetadata", function () {
 console.log("width:", this.videoWidth);
 console.log("height:", this.videoHeight);
});

score 0 · Answer 3 · answered Jun 22 '22 at 07:49

0

const onSelectVideo = (files) => {
const file = files[0];
const url = URL.createObjectURL(file);
let videoId = "videoMain";
const video = document.createElement("video");
const body = document.getElementsByTagName("body");

video.setAttribute("src", url);
video.setAttribute("videoId", videoId);
body[0]?.append(video);
let videoTagRef = document.querySelector("[videoId='videoMain']");

videoTagRef.addEventListener("loadedmetadata", function (e) {
  console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});}

answered Jun 22 '22 at 07:49

Mayank Gupta

9
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the [help center](https://stackoverflow.com/help/how-to-answer). – Ethan Jun 25 '22 at 02:26

Client side Javascript get video width/height before upload

3 Answers3