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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -