当我使用filereader读取视频文件时，如何获取视频的持续时间？ [英] How to get duration of video when I am using filereader to read the video file?

问题描述

我正在尝试将视频上传到服务器，并在客户端上传。我正在使用FileReader的 readAsBinaryString（）来阅读它。

I am trying to upload a video to server, and on client end. I am reading it using FileReader's readAsBinaryString().

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

Now, my problem is, I don't know how to read duration of this video file.

如果我尝试读取文件，并将阅读器的数据分配给视频标签的来源，则没有与视频相关的事件标签被解雇了。我需要找到在客户端上传的文件的持续时间。

If i try reading the file, and assigning the reader's data to a video tag's source, then none of the events associated to the video tag are fired. I need to find the duration of file uploaded on client end.

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

Can somebody please suggest me something?

推荐答案

你可以做这样的工作：

• 将文件读取为ArrayBuffer（稍后可以将其作为二进制流直接发布到服务器）


• 将其包装在Blob对象中


• 创建对象blob的URL


• 并最终将url设置为视频源。

• read the file as ArrayBuffer (this can be posted directly to server as a binary stream later)
• wrap it in a Blob object
• create an object URL for the blob
• and finally set the url as the video source.

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

When the video object triggers the loadedmetadata event you should be able to read the duration.

您也可以使用数据 - uri ，但请注意，浏览器可能会对其应用大小限制（以及其他缺点）在视频文件方面是必不可少的，并且由于Base-64处理，存在显着的编码/解码开销s。

You could use data-uri too, but notice that browsers may apply size limits (as well as other disadvantages) for them which is essential when it comes to video files, and there is a significant encoding/decoding overhead due to the Base-64 process.

选择一个你知道浏览器可以处理的视频文件（在生产中你当然应该过滤接受的文件类型基于 video.canPlayType（））。

Select a video file you know the browser can handle (in production you should of course filter accepted file types based on video.canPlayType()).

上述步骤后的持续时间将显示执行（示例中没有包含错误处理，根据需要进行调整）。

The duration will show after the above steps has performed (no error handling included in the example, adjust as needed).

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>

这篇关于当我使用filereader读取视频文件时，如何获取视频的持续时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！