Angular 如何避免上传角度较大的视频？

我有一个angular应用程序，可以让你上传图像和视频。但是，我希望避免上传超过30秒的视频。我的问题是。。。考虑到以下问题，我如何防止加载持续时间超过30秒的视频？而不是在加载和显示它们之后删除它们？是否有可能通过角度测量来实现这一目标

非常感谢

是的，这是可能的

其想法是创建一个对象url，并将其加载到视频元素中，这样可以在将视频上传到服务器之前获取视频的属性：

模板：

<video #vid controls width="500px" id="vid" style="display:none"></video>

---

这里有一个

此解决方案不适用于从Whatsapp下载的视频或使用Safari浏览器时

@ViewChild("vid") ele: any;
onSelectFile(event) {
  const files = event.target.files;
  if (files) {
    for (const file of files) {
      const objectUrl = URL.createObjectURL(file);
      this.ele.nativeElement.src = objectUrl;
      const reader = new FileReader();
      reader.onload = (e: any) => {
        if (this.ele.nativeElement.duration > 30) {
            alert("movie is too long!");
        }
        this.mydata.push({
            url: e.target.result,
            type: "video"
        });
      }
    };
    reader.readAsDataURL(file);
  }
}