TypeScript youtube.d.ts from DefinitelyTyped

第一次尝试TypeScript/Javascript;试图将TypeScript time示例与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无法工作。

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

相关内容

最新更新

热门标签：