TypeScript youtube.d.ts от DefinitelyTyped

Пробуем TypeScript/Javascript в первый раз; пытаясь объединить пример времени TypeScript с API iframe YouTube здесь:

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();
};

Я пытаюсь использовать декларацию окружения YouTube из DefinitelyTyped, которую я установил с помощью NuGet (таким образом, ссылка на youtube.d.ts)

Проблема в том, что когда я запускаю это, я получаю страницу со строкой «время есть» и ничего больше.

Итак, что-то, что я сделал, это разбить пример времени TypeScript, И API YouTube не работает.


person Andrew Olney    schedule 14.05.2013    source источник


Ответы (1)


Вам нужно загрузить скрипт youtube api перед app.js :

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>
person basarat    schedule 15.05.2013