вызовите другой метод внутри видео addEventListener - PullRequest
Новая
       29

вызовите другой метод внутри видео addEventListener

0 голосов
/ 19 октября 2018

Я новичок в веб-разработке и создании приложения на Ionic 4 + Angular 5. Я выбираю видеофайл и загружаю его вместе с его миниатюрой.Я могу создать эскиз.Но проблема в том, что я не уверен, как вызвать метод внутри video addeventlistener loadeddata.Когда я вызываю внешний метод (this.convertB64ToBlob()) непосредственно внутри EventListener, я получаю сообщение об ошибке 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);


  }

Error I got

1 Ответ

0 голосов
/ 19 октября 2018

Преобразовать все ссылки function() в синтаксис функции Arrow, чтобы она охватывала 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);


}
...