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

Question

我正在尝试将视频上传到服务器和客户端。我正在使用 FileReader 的 readAsBinaryString().

阅读它

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

如果我尝试读取文件，并将 reader 的数据分配给视频标签的源，那么 none 与视频标签关联的事件将被触发。我需要找到客户端上传文件的持续时间。

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

Answer 1

你可以做这样的事情来让它工作：

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

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

您也可以使用 data-uri，但请注意，浏览器可能会为它们应用 size limits (as well as other disadvantages)，这对于视频文件来说是必不可少的，并且由于Base-64 进程。

例子

Select 您知道浏览器可以处理的视频文件（在生产中您当然应该根据 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);

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

How to get duration of video when I am using filereader to read the video file?

javascript

html5-video

filereader

例子

Fiddle Demo