显示进度。使用iframe youtube播放器api播放视频

Question

我已经使用其ipframe API嵌入了youtube视频。我可以加载视频并播放。但是，我想在用户界面上显示视频的当前时间。直到发生UI事件（如单击按钮），它才会刷新。我正在使用Angular8。这是我的模板代码：

...
<button class="btn btn-dark mb-5" (click)="onMute()">Mute</button>
<button class="btn btn-dark mb-5" (click)="onUnmute()">Unmute</button>
</div>
<p>Progress: {{videoProg}}</p>

<!-- YT Player will embed IP frame below.-->
<div class="mt-1" id="player"></div>

这是我的组件代码：

  this.subscription = source.subscribe(val => {
  this.videoProg = this.cleanTime()
  console.log("check progress fired. ", this.videoProg);
});

以下是用户界面的外观：

Answer 1

就像我期望的那样：)您的事件来自youtube库中一个非所谓的猴子补丁事件系统。从这里触发的任何事件都不会被zone.js修补，因此将在角度NgZone之外运行。

要解决此问题，您需要注入NgZone并使用ngZone.run()将您的代码恢复到更改检测中：

constructor(private ngZone: NgZone) {}

events: {
  'onStateChange': (event) => this.ngZone.run(() => this.onPlayerStateChange(event)),
  'onError': (event) => this.ngZone.run(() => this.onPlayerError(event)),
  'onReady': (event) => this.ngZone.run(() => this.onPlayerReady(event))
}

working stack