Get video duration when input a video file

by

In modern browsers, You can use the URL API’s URL.createObjectURL() with an non appended video element to load the content of your file.

var myVideos = [];

window.URL = window.URL || window.webkitURL;

document.getElementById('fileUp').onchange = setFileInfo;

function setFileInfo() {
  var files = this.files;
  myVideos.push(files[0]);
  var video = document.createElement('video');
  video.preload = 'metadata';

  video.onloadedmetadata = function() {
    window.URL.revokeObjectURL(video.src);
    var duration = video.duration;
    myVideos[myVideos.length - 1].duration = duration;
    updateInfos();
  }

  video.src = URL.createObjectURL(files[0]);;
}


function updateInfos() {
  var infos = document.getElementById('infos');
  infos.textContent = "";
  for (var i = 0; i < myVideos.length; i++) {
    infos.textContent += myVideos[i].name + " duration: " + myVideos[i].duration + '\n';
  }
}
<div id="input-upload-file" class="box-shadow">
  <span>upload! (ღ˘⌣˘ღ)</span>
  <input type="file" class="upload" id="fileUp" name="fileUpload">
</div>
<pre id="infos"></pre>

More Related Contents:

  1. Input type="text" with select functionality after clicking on Input type="text"
  2. Syntax Higlighter For Site [closed]
  3. HTML: how refresh information in [closed]
  4. how i can connect and login in mysql localhost in php by using this html code
  5. Where should I put tags in HTML markup?
  6. How to get JS variable to retain value after page refresh? [duplicate]
  7. How to impose maxlength on textArea in HTML using JavaScript
  8. How to add image to canvas
  9. Can I use HTML tags in the options for select elements? [duplicate]
  10. Remove CSS class from element with JavaScript (no jQuery) [duplicate]
  11. Get class name using jQuery
  12. How to update placeholder color using Javascript?
  13. what are data-* HTML attributes?
  14. Prevent orientation change in iOS Safari
  15. Perform action when clicking HTML5 datalist option
  16. Position fixed not working in mobile browser
  17. how to add new to onclick with javascript
  18. How to Clear/Remove JavaScript Event Handler?
  19. Remove specific HTML tag with its content from javascript string
  20. How to define the css :hover state in a jQuery selector?
  21. How to get list of network requests done by HTML
  22. Create a string of variable length, filled with a repeated character
  23. How to remove youtube branding after embedding video in web page?
  24. AngularJS – placeholder for empty result from filter
  25. How to scroll to an element in jQuery?
  26. Extracting text from a contentEditable div
  27. How to create a collapsing tree table in html/css/js?
  28. Can I load a local file into an html canvas element?
  29. How to keep the header static, always on top while scrolling?
  30. Convert JavaScript variable value to csv file

Leave a Comment