如何使用 ng2-file-upload 检查 Angular 4.3.1 中视频的持续时间？答案

【问题标题】：How to check duration of video in Angular 4.3.1 using ng2-file-upload?如何使用 ng2-file-upload 检查 Angular 4.3.1 中视频的持续时间？
【发布时间】：2026-01-05 22:30:01
【问题描述】：

我正在使用 ng2-file-upload 上传视频，最长上传时间为 15 分钟。那么如何在将其上传到服务器之前获得它的持续时间呢？这些扩展只允许：- -.MOV -.MPEG4 -.AVI -.FLV -.3FPP -.WebM 和 -.MPEGS。如果有人知道，请回复。

【问题讨论】：

您的工具（Angular 等）可以检查字节值吗？您必须检查每种格式的文件元数据部分的字节。这些视频格式也有规范在线发布。例如搜索FLV format specifications。使用十六进制编辑器打开 x 格式的视频文件以查看其字节。如果您可以手动找到持续时间，那么接下来编写代码来完成。
使用 ng2-file-upload 我只得到视频的大小。我怎样才能找到它的持续时间？
大小表示它包含的总字节数。如果您知道什么是数组，那么字节只是一个大数字数组。您需要检查索引处的数值，例如 myVideoBytes[0] 或 myVideoBytes[15]。检查格式规范，因为 MOV 将持续时间字节放在与 AVI 不同的位置，这对于 FLV 等也是不同的。要处理用户选择文件，您是使用 HTML5 的File API 还是通过 PHP？

标签： angular video upload duration ng2-file-upload

【解决方案1】：

您可以在 Angular 应用程序中包含 vanilla Javascript 来执行此操作。

以下将为您提供持续时间（在 mp4 上测试）：

var inputBox = document.getElementById("videoInput")

inputBox.onchange = function(files)  {
  alert("starting")
  var video = document.createElement('video');
  alert("video created")
  video.preload = 'metadata';
  video.onloadedmetadata = function() {
    alert("metadata loaded")
    var duration = video.duration;
    alert("duration is " + duration)
  }
  var selectedVID = document.getElementById("videoInput").files[0];
  video.src = URL.createObjectURL(selectedVID);
}

<div id="input-upload-file">
  <p>
  Video Upload Duration test
  </p>
  <input id="videoInput" type="file" class="upload" name="fileUpload">
</div>

【讨论】：

嗨米克，谢谢！除了使用 ng2-file-upload 的 javascript 还有其他方式吗？