Получить элемент видео в файле ts

Question

Я новичок в Ionic и работаю над Ionic 4. Я хочу получить миниатюру кадра из видео src. Для этого я должен получить видео элемент в моем файле .ts. Я попытался использовать ViewChild, как показано в этой ссылке . Но когда я запускаю его в браузере, я получаю эту ошибку TypeError: Cannot read property 'addEventListener' of undefined. Есть ли что-то, что мне не хватает? Я получил элемент Canvas таким же образом, и я думаю, что он работает. Но это не работает для видео тега.

export class UploadvidPage implements OnInit {
  @ViewChild('myVideo') myVideo: ElementRef;
  @ViewChild('myCanvas') myCanvas: ElementRef;
  public isAndroid: boolean;
  public imageUrl: any;
  public fpath;
  public video: any;
  public canvas: any;
  public context: CanvasRenderingContext2D;
  
  ngAfterViewInit(): void {
    this.video = this.myVideo.nativeElement;
    this.canvas = this.myCanvas.nativeElement;
    this.context =(<HTMLCanvasElement>this.canvas).getContext('2d');
  }
  
  handleFileSelect(evt){
    
    let files = evt.target.files;
    let file = files[0] 
    var binaryData = [];
    binaryData.push(file);
    this.fpath = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(new Blob(binaryData, {type: "application/zip"})));
   
    var w,h,ratio;

    //below code for setting snap of video into canvas
    this.video.addEventListener('loadedmetadata', function() {
      console.log('Got into video.addEventListener()');
      ratio = this.video.videoWidth/this.video.videoHeight;
      w = this.video.videoWidth-100;
      h = w/ratio,10;
      this.video.width = w;
      this.canvas.height = h;
      snap();
    },false);
  
    function snap() {
      console.log('Got into snap()');
      this.context.fillRect(0,0,w,h);
      this.context.drawImage(this.video,0,0,w,h);
    }



  }
  
  
}  

<input  id="file-input" type="file" accept="video/*" (change)="handleFileSelect($event)">
<video *ngIf="fpath" id="myVideo" #myVideo controls>
     <source [src]="fpath" id="source">
</video>
<canvas #myCanvas width="640" height="480"></canvas>

Answer 1

Вам необходимо провести рефакторинг вашего кода. Потому что в коде, который вы разместили, при просмотре init (ViewChild + ngAfterViewInit) ваше видео еще не существует из-за *ngIf="fpath" (где fpath заполняется только при выборе пользователя, поэтому в handleFileSelect а не при просмотре init).

Несколько решений:

• удалить * ngIf (предпочитаете, может быть, его скрывать?). Таким образом, ViewChild + ngAfterViewInit будет отлично работать

• Динамически получить ссылку на шаблон видео, как только *ngIf оценивается как true (и позволить angular выполнить его, прежде чем пытаться его использовать). Следующий код будет запускать сеттер каждый раз, когда он принимает значение true:

@ViewChild('myVideo') set content(content: ElementRef) { this.myVideo = content; }

+

Задержка вашего addEventListener: например, с помощью setTimeout, чтобы убедиться, что angular успел инициализировать ваш myVideo