在Angular 6中导入YouTube iframe API的简单方法是什么?

问题描述 投票:0回答:1

所以我需要跟踪嵌入我们应用程序的youtube的时间监视等,我认为最好的方法是使用YouTube iframe API并监听事件,但在模板中使用(onReady),然后将其分配给控制器中的方法 - 显而易见的方式似乎不起作用:

文档显示了这个方法(https://developers.google.com/youtube/iframe_api_reference),但它在模板中包含了脚本标记,我需要一种有角度的方式来完成它而不会在你的html中放入太多的ts,并打破项目的整体一致性,加上文档不显示怎么做在Angular2,

angular6 youtube-iframe-api
1个回答
0
投票

从那时起,我通过从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()等方法,或者为其指定任何变量。

编辑:它仍然使用文档和窗口对象而不是角元素引用,我会在找到使用窗口/文档的方法后更新此答案。

© www.soinside.com 2019 - 2024. All rights reserved.