DefinitelyTyped的TypeScript youtube.d.ts

第一次試用TypeScript/Javascript;嘗試使用YouTube的iframe API這裏合併打字稿時間例如：DefinitelyTyped的TypeScript youtube.d.ts

https://developers.google.com/youtube/iframe_api_reference

我的HTML頁面看起來像這樣：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>TypeScript HTML App</title> 
    <link rel="stylesheet" href="app.css" type="text/css" /> 
    <script src="app.js"></script> 
</head> 
<body> 
    <div id="content"></div> 
    <div id="player"></div> 
</body> 
</html>

我的怪人打字稿看起來是這樣的：

/// <reference path="Scripts/typings/youtube/youtube.d.ts" /> 

class Greeter { 
    element: HTMLElement; 
    span: HTMLElement; 
    timerToken: number; 
    done: bool; 
    player: YT.Player; 

    constructor(element: HTMLElement) { 
     this.element = element; 
     this.element.innerHTML += "The time is: "; 
     this.span = document.createElement('span'); 
     this.element.appendChild(this.span); 
     this.span.innerText = new Date().toUTCString(); 

     this.done = false; 

     this.player = new YT.Player('player', { 
      height: 390, 
      width: 640, 
      videoId: 'M7lc1UVf-VE', 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 


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

     function onPlayerStateChange(event) { 
      if (event.data == YT.PlayerState.PLAYING && !this.done) { 
       setTimeout(stopVideo, 6000); 
       this.done = true; 
      } 
     } 
     function stopVideo() { 
      this.player.stopVideo(); 
     } 

    } 

    start() { 
     this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500); 

     var tag = document.createElement('script'); 
     (<HTMLScriptElement>tag).src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    } 

    stop() { 
     clearTimeout(this.timerToken); 
    } 

} 

window.onload =() => { 
    var el = document.getElementById('content'); 
    var greeter = new Greeter(el); 
    greeter.start(); 
};

我試圖使用DefinitelyTyped的YouTube環境聲明，我使用NuGet安裝（因此參考了youtube.d.ts）

問題是，當我運行這個，我得到一個字符串「時間是」的頁面，沒有別的。

因此，我所做的一切就是打破TypeScript時間示例，而YouTube API不起作用。

來源

2013-05-14 Andrew Olney

這現在解決了嗎？ – basarat

您需要在app.js之前加載的YouTube API腳本：

https://www.youtube.com/iframe_api 即：

<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

以下作品（測試）：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>TypeScript HTML App</title> 
    <link rel="stylesheet" href="app.css" type="text/css" /> 
    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script> 
    <script src="app.js"></script> 
</head> 
<body> 
    <div id="content"></div> 
    <div id="player"></div> 
</body> 
</html>

來源

2013-05-15 01:50:19 basarat

DefinitelyTyped的TypeScript youtube.d.ts

回答

相關問題