所以我需要跟踪嵌入我们应用程序的youtube的时间监视等,我认为最好的方法是使用YouTube iframe API并监听事件,但在模板中使用(onReady),然后将其分配给控制器中的方法 - 显而易见的方式似乎不起作用:
文档显示了这个方法(https://developers.google.com/youtube/iframe_api_reference),但它在模板中包含了脚本标记,我需要一种有角度的方式来完成它而不会在你的html中放入太多的ts,并打破项目的整体一致性,加上文档不显示怎么做在Angular2,
从那时起,我通过从stackoverflow答案中获取引用找到了一种方法
在你的模板中:qazxsw poi
在ts ngAfterViewinit中:
<div #ytPlayer id="ytPlayer"></div>
然后在完成加载api时监听iFrame在窗口上触发的事件:
ngAfterViewInit() {
const doc = (<any>window).document;
const playerApiScript = doc.createElement('script');
playerApiScript.type = 'text/javascript';
playerApiScript.src = 'https://www.youtube.com/iframe_api';
doc.body.appendChild(playerApiScript);
}
然后,您可以在播放器上调用getCurrentTime()等方法,或者为其指定任何变量。
编辑:它仍然使用文档和窗口对象而不是角元素引用,我会在找到使用窗口/文档的方法后更新此答案。