检查上传的视频长度 - Angular [重复]答案

【问题标题】：Check video length on upload - Angular [duplicate]检查上传的视频长度 - Angular [重复]
【发布时间】：2018-10-10 12:37:30
【问题描述】：

我正在尝试检查我上传的视频是否超过 30 秒，但无法获得我需要的示例。这是我目前检查大小和其他一些东西的代码：

readVideoUrl(event: any) {
      this.videoFile = [];
        const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        const files: FileList = target.files;
        if (files) {
            this.videoFile.push(files[0]);
            this.videoModel.name = files[0].name;
        }


        if (event.target.files && event.target.files[0]) {
            let reader = new FileReader();

            reader.onload = (event: ProgressEvent) => {
                this.videoUrl = (<FileReader>event.target).result;
            };

            reader.readAsDataURL(event.target.files[0]);
        }

        const FileSize = files[0].size / 1024 / 1024; // in MB
        if (FileSize > 50) {
            this.videoSizeError = true;
        } else {
            this.videoSizeError = false;
        }

        this.videoModel.file = event.target.value;
        this.videoModel.name = event.target.files[0].name;
    }

有什么建议吗？

【问题讨论】：

FileReader 本身无法为您提供该信息 - 它没有特定文件类型“视频”的概念。我想您必须先将此视频加载到实际的 video 元素中，然后才能使用其方法检查视频长度。
@misorude 我已经有视频元素，我只是将 url 传递给它，如何从中检索长度？
在 Google 中输入诸如“html5 video get length”之类的琐碎内容并找出...？

标签： javascript angular

【解决方案1】：

我会添加一个不可见的视频播放器并设置其来源，然后从中获取持续时间：

HTML：

<input type="file" (change)="readVideoUrl($event)">

<p *ngIf="videoSizeError">Too big</p>

<video #video style="display: none;" *ngIf="videoUrl" width="320" height="240" controls [attr.src]="videoUrl" (loadedmetadata)="getDuration($event)">
</video>

TS：

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  videoUrl;
  videoSizeError;

  constructor(private sanitizer: DomSanitizer) { }

  readVideoUrl(event: any) {
    const files = event.target.files;
    if (files && files[0]) {
      this.videoUrl = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(files[0]));
    }
  }

  getDuration(e) {
    const duration = e.target.duration;
    this.videoSizeError = duration > 30;
  }
}

working code's link

【讨论】：