Question

我正在尝试将视频上传到服务器，并在客户端上传。我正在使用FileReader＆＃39; s readAsBinaryString()。

阅读它

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

如果我尝试阅读该文件，并将读者的数据分配给视频标记的来源，则不会触发与视频标记相关联的任何事件。我需要找到在客户端上传的文件的持续时间。

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

Answer 1

您可以执行以下操作：

将文件读取为ArrayBuffer（稍后可以将其作为二进制流直接发布到服务器）
将其包装在Blob对象中
为blob创建对象URL
最后将网址设置为视频源。

当视频对象触发loadedmetadata事件时，您应该能够阅读持续时间。

您也可以使用data-uri，但请注意浏览器可能会为它们应用size limits (as well as other disadvantages)，这对于视频文件至关重要，并且由于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);

当我使用文件阅读器阅读视频文件时，如何获取视频的持续时间？

2 个答案:

实施例

Fiddle Demo