Question

我是Ionic的新手，正在从事Ionic 4的工作。我想从video src获取帧缩略图。为此，我必须在.ts文件中获取视频元素。我尝试使用ViewChild，如本link所示。但是，当我在浏览器中运行它时，出现此错误app.post('/login/callback', function(req, res, next) { var config = // extract config name somehow passport.authenticate(config, { failureRedirect: '/', failureFlash: true })(req, res, next); } function(req, res) { res.redirect('/'); } );。有什么我想念的吗？我也以相同的方式获得了Canvas的元素，我认为它的工作原理。但是它不适用于视频标记。

TypeError: Cannot read property 'addEventListener' of undefined

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);
    }



  }
  
  
}

Answer 1

您需要重构代码。因为在您发布的代码中，在视图初始化（ViewChild + ngAfterViewInit时，由于*ngIf="fpath"（其中fpath仅填充在用户选择，因此在handleFileSelect中，而不是在视图初始化中）。

多种解决方案：

删除* ngIf（最好隐藏它？）。这样，ViewChild + ngAfterViewInit将可以完美运行
一旦*ngIf评估为true，就动态检索视频模板引用（并在尝试使用它之前让angular执行它）。下面的代码每次解析为true时都会触发setter：

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

+

延迟addEventListener：例如使用setTimeout，以确保Angle有时间初始化myVideo

在ts文件中获取视频元素

1 个答案: