2
第一次试用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不起作用。
这现在解决了吗? – basarat