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

Question

我使用他们的 ipframe API 嵌入了 YouTube 视频。我能够加载视频并播放。但是，我想在 UI 上显示视频的当前时间。它永远不会刷新，直到有 UI 事件，就像我点击一个按钮一样。我正在使用 Angular 8。这是我的模板代码：

...
<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);
});

UI 的外观如下：

Answer 1

正如我所料:) 您的事件来自 youtube 库中一个非所谓的猴子补丁事件系统。从这里触发的任何事件都不会被 zone.js 修补，因此将运行在 angular 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

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

Display progress of . video playing using Iframe youtube player api

javascript

typescript

youtube-iframe-api

angular