Extract video metadata

Works on files of any size by slicing 5MB off the start of the video which is where the metadata is located

HTML

<input type="file" id="fileInput">
<div> duration: <span id='sp'></span>
  <div>

JavaScript

var fileEl = document.querySelector("input");

        fileEl.onchange = function(e) {

          document.querySelector("div")
            .innerHTML = "";

          var file = e.target.files[0]; // selected file

          if (!file) {
            console.log("nothing here");
            return;
          }

          console.log(file);
          console.log(file.size);

          var mime = file.type, // store mime for later
            rd = new FileReader(); // create a FileReader

          rd.onload = function(e) { // when file has read:

            var blob = new Blob([e.target.result], {
                type: mime
              }), // create a blob of buffer
              url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
              video = document.createElement("video"); // create video element

            video.preload = "metadata"; // preload setting
console.log("OKK")
            video.addEventListener("loadedmetadata", function() {
            console.log(video.duration)
            // when enough data loads
              document.querySelector("div")
                .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
              (URL || webkitURL).revokeObjectURL(url); // clean up

              // ... continue from here ...

            });
            video.src = url; // start video load
          };

          var chunk = file.slice(0, 500000); // .5MB
          rd.readAsArrayBuffer(chunk); // read file object

        };