在视频中调用另一个方法 addEventListener

Question

我是 Web 开发和在 Ionic 4+ 中构建应用程序的新手Angular 5. 我正在选择一个视频文件并将其连同其缩略图一起上传。我能够生成缩略图。但问题是我不确定如何在 video addeventlistener loadeddata 中调用方法。当我直接在事件监听器中调用外部方法 (this.convertB64ToBlob()) 时，我收到一条错误消息 this.convertB64ToBlob is not a function。如果有另一种直接调用外部方法的方法，请告诉我。谢谢。

// method to get thumbnail from video tag

getThumbnail(blob, filesize, filetype, filename) {
    var time = 15;
    var scale = 1;

    this.cdRef.detectChanges();
    const myVideo = this.elementRef.nativeElement.querySelector('#myVideo');
    var output = document.getElementById('output');
    myVideo.addEventListener('loadedmetadata', function () {

      this.currentTime = time;

    }, false);


    myVideo.addEventListener('loadeddata', function () {

      var canvas = document.createElement("canvas");
      canvas.width = myVideo.videoWidth * scale;
      canvas.height = myVideo.videoHeight * scale;
      canvas.getContext('2d').drawImage(myVideo, 0, 0, canvas.width, canvas.height);

      var img = document.createElement("img");
      img.setAttribute("id", "thumbImg");
      img.src = canvas.toDataURL();
      output.appendChild(img);
      this.fImgPath = canvas.toDataURL().split(',')[1];
      console.log('my video path: '+this.fImgPath);
      const tblob = this.convertB64ToBlob(this.fImgPath);
      this.getToken(blob, tblob, filesize, filetype, filename);

    }, false); 

    //myVideo.loadeddata = this.setImage.bind(myVideo, blob, filesize, filetype, filename);


  }

Answer 1

将所有 function() 引用转换为箭头函数语法，使其范围 this 到页面。

// method to get thumbnail from video tag

getThumbnail(blob, filesize, filetype, filename) {
  var time = 15;
  var scale = 1;

  this.cdRef.detectChanges();
  const myVideo = this.elementRef.nativeElement.querySelector('#myVideo');
  var output = document.getElementById('output');
  myVideo.addEventListener('loadedmetadata', () => {

    this.currentTime = time;

  }, false);


  myVideo.addEventListener('loadeddata', () => {

    var canvas = document.createElement("canvas");
    canvas.width = myVideo.videoWidth * scale;
    canvas.height = myVideo.videoHeight * scale;
    canvas.getContext('2d').drawImage(myVideo, 0, 0, canvas.width, canvas.height);

    var img = document.createElement("img");
    img.setAttribute("id", "thumbImg");
    img.src = canvas.toDataURL();
    output.appendChild(img);
    this.fImgPath = canvas.toDataURL().split(',')[1];
    console.log('my video path: ' + this.fImgPath);
    const tblob = this.convertB64ToBlob(this.fImgPath);
    this.getToken(blob, tblob, filesize, filetype, filename);

  }, false);

  //myVideo.loadeddata = this.setImage.bind(myVideo, blob, filesize, filetype, filename);


}

在视频中调用另一个方法 addEventListener

call another method inside video addEventListener

html5-video

ionic-framework

angular