Переменная область, не может получить доступ к значению - PullRequest
Новая
       7

Переменная область, не может получить доступ к значению

0 голосов
/ 22 ноября 2018

Я не могу назначить текущее время моей переменной 'currentTime', есть идеи, как найти обходной путь, позволяющий переменной получить текущее время видео?Кажется, это классическая проблема с переменной области, но я не могу найти решение, какие-либо советы?спасибо! 

 import {Component, OnInit} from '@angular/core';


@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.css']
})
export class PlayerComponent implements OnInit {

  currentTime = 0;

  ngOnInit() {

    let player;
    let myTimer;


    window['onYouTubeIframeAPIReady'] = function () {
      player = new window['YT'].Player('video', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerReady
        }
      });
    };

    function onPlayerReady(event) {
      event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data === 1) { // playing
          myTimer = setInterval(() => {
            const time = player.getCurrentTime();
            console.log(time); // I want to set the currentTime declared on top equal to player.getCurrentTime();
          }, 100);
        } else { // not playing
          clearInterval(myTimer);
        }
    }

    if (!window['YT']) {
      const tag = document.createElement('script');
      tag.src = '//www.youtube.com/player_api';
      const firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }
  }


  constructor() {

  }
}

Спасибо за все ваши ответы, я закончил делать классический трюк this, но после прочтения: Как получить доступ к правильному `this` внутри обратного вызова? , этозакончил с помощью функции связывания.Странная часть этого кода в том, что без интервала 'checkCurrentTime' currentTime не обновляется в HTML-макете, определенно не понимаю, почему.

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';


@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.css']
})
export class PlayerComponent implements OnInit, AfterViewInit {

  tempoAttuale = 0;

  ngAfterViewInit() {


    let player;
    let myTimer;

    window['onYouTubeIframeAPIReady'] = function () {
      player = new window['YT'].Player('video', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    };

    function onPlayerReady(event) {
      event.target.playVideo();
    }

    const tis = this;
    function onPlayerStateChange(event) {
      if (event.data === 1) { // playing
        myTimer = setInterval(() => {
          const time = player.getCurrentTime();
          tis.tempoAttuale = time;
        }, 100);
      } else { // not playing
        clearInterval(myTimer);
      }
    }

    /*
    I don't know why, but thanks to that the value of 'tempoAttuale' time on html is updated
     */
    const checkCurrentTime = setInterval(() => {
    }, 100);


    if (!window['YT']) {
      const tag = document.createElement('script');
      tag.src = '//www.youtube.com/player_api';
      const firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }
  }

  ngOnInit() {

  }


  constructor() {

  }
}
...