TypeScript youtube.d.ts from DefinitelyTyped -
trying out typescript/javascript first time; trying merge typescript time example youtube iframe api here:
https://developers.google.com/youtube/iframe_api_reference
my html page looks this:
<!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>
and frankenstein typescript looks this:
/// <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(); };
i'm trying use youtube ambient declaration definitelytyped, installed using nuget (thus reference youtube.d.ts)
the problem when run this, page string "the time is" , nothing else.
so i've done breaking typescript time example , youtube api not working.
you need load youtube api script before app.js :
https://www.youtube.com/iframe_api i.e:
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
the following works (tested):
<!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>
Comments
Post a Comment