现代浏览器中,您可以使用URL.createObjectURL()带有非附加视频元素的URL API 来加载文件的内容。
URL.CreateObjectURL()详细介绍见:https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Browser_Compatibility

上代码

  1. var myVideos = [];
  2. window.URL = window.URL || window.webkitURL;
  3. document.getElementById('fileUp').onchange = setFileInfo;
  4. function setFileInfo() {
  5. var files = this.files;
  6. myVideos.push(files[0]);
  7. var video = document.createElement('video');
  8. video.preload = 'metadata';
  9. video.onloadedmetadata = function() {
  10. window.URL.revokeObjectURL(video.src);
  11. var duration = video.duration;
  12. myVideos[myVideos.length - 1].duration = duration;
  13. updateInfos();
  14. }
  15. video.src = URL.createObjectURL(files[0]);;
  16. }
  17. function updateInfos() {
  18. var infos = document.getElementById('infos');
  19. infos.textContent = "";
  20. for (var i = 0; i < myVideos.length; i++) {
  21. infos.textContent += myVideos[i].name + " duration: " + myVideos[i].duration + '\n';
  22. }
  23. }
  24. <div id="input-upload-file" class="box-shadow">
  25. <span>upload! (ღ˘⌣˘ღ)</span>
  26. <input type="file" class="upload" id="fileUp" name="fileUpload">
  27. </div>
  28. <pre id="infos"></pre>