来自DefinitelyTyped 的TypeScript youtube.d.ts答案

【问题标题】：TypeScript youtube.d.ts from DefinitelyTyped来自DefinitelyTyped 的TypeScript youtube.d.ts
【发布时间】：2013-05-15 09:50:19
【问题描述】：

第一次尝试 TypeScript/Javascript；尝试在此处将 TypeScript 时间示例与 YouTube iframe API 合并：

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>

我的科学怪人 TypeScript 看起来像这样：

/// <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 无法正常工作。

【问题讨论】：

标签： youtube-api typescript definitelytyped

【解决方案1】：

您需要在 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>

【讨论】：