当我使用filereader读取视频文件时,如何获取视频的持续时间？

Question

我正在尝试将视频上传到服务器,并在客户端上传.我正在使用FileReader来阅读它readAsBinaryString().

现在,我的问题是,我不知道如何阅读此视频文件的持续时间.

如果我尝试读取文件,并将阅读器的数据分配给视频标签的源,则不会触发与视频标签关联的任何事件.我需要找到客户端上传的文件的持续时间.

有人可以给我一些建议吗？

Answer 1

你可以做这样的事情来做到这一点:

• 将文件读取为ArrayBuffer(稍后可以将其作为二进制流直接发布到服务器)
• 将其包装在Blob对象中
• 为blob创建一个对象URL
• 最后将url设置为视频源.

当视频对象触发loadedmetadata事件时,您应该能够读取持续时间.

您也可以使用data-uri,但请注意浏览器可能会对它们应用大小限制(以及其他缺点),这对于视频文件至关重要,并且由于Base-64而存在显着的编码/解码开销处理.

例

选择一个您知道浏览器可以处理的视频文件(在生产中,您当然应根据此过滤接受的文件类型video.canPlayType()).

执行上述步骤后将显示持续时间(示例中未包含错误处理,根据需要进行调整).

var fileEl = document.querySelector("input");
fileEl.onchange = function(e) {

  var file = e.target.files[0],                               // selected file
      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
    video.addEventListener("loadedmetadata", function() {     // when enough data loads
      document.querySelector("div")
          .innerHTML = "Duration: " + video.duration + "s";   // show duration
      (URL || webkitURL).revokeObjectURL(url);                // clean up

      // ... continue from here ...

    });
    video.src = url;                                          // start video load
  };
  rd.readAsArrayBuffer(file);                                 // read file object
};

<input type="file"><br><div></div>

Answer 2

您可以执行以下操作，诀窍是使用readAsDataURL：

var reader = new FileReader();
reader.onload = function() {
    var media = new Audio(reader.result);
    media.onloadedmetadata = function(){
         media.duration; // this would give duration of the video/audio file
    };    
};
reader.readAsDataURL(file); 

小提琴演示