onYouTubeIframeAPIReady on Angular2는 글로벌 객체에 정의 된 경우에도 'YT'이름을 찾을 수 없습니다.

Question

사용자가 YouTube 동영상을 일시 중지하는 시간을 캡처하기 위해 () onYouTubeIframeAPIReady 콜백 메소드를 Angular2 .

나는 here 및 here과 비슷한 어려움을 겪고 있습니다.

나는 조언을 따라 (window as any).onYouTubeIframeAPIReady = function() {}을 사용하여 끝났다. 유형의

인수 : 내 타이프 라이터의 린터에서 다음과 같은 오류 얻을

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

: '{이벤트 : {'onReady 내에서 onYouTubeIframeAPIReady 방법에서

는하지만, 나는 다음과 같은 코드가 있습니다 ': (event : any) => void; '되고 onStateChange'(이벤트 : 임의) => 보이드가}} '형식의 파라미터에 할당 할 수없는'PlayerOptions

내 최소한의 예 REPO 여기에서 찾을 수있다 :

git clone https://github.com/Atticus29/dataJitsu.git 
cd dataJitsu 
git checkout stackoverflow 
npm install 
ng serve 

Answer 1

는 window['YT'] 사용 YT 대신에 이것을 해결하는 것으로 보입니다 :

ngOnInit() { 
    var player; 

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

    function onPlayerStateChange(event){ 
    if (event.data == window['YT'].PlayerState.PAUSED) { 
     console.log(player.getCurrentTime()); 
    } 
    } 

    function onPlayerReady(event) { 
    document.getElementById("pause").addEventListener("click", function() { 
     player.pauseVideo(); 
    }); 
    document.getElementById("play").addEventListener("click", function() { 
     player.playVideo(); 
    }); 
    } 

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