第一次尝试 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 的引用)
问题是，当我运行它时，我得到一个页面，其中包含字符串“the time is”，除此之外什么都没有。
所以我所做的事情是破坏了 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>
关于youtube-api - 来自 DefinitelyTyped 的 TypeScript youtube.d.ts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16554275/