显示进度。使用 iframe youtube player api 播放视频答案

【问题标题】：Display progress of . video playing using Iframe youtube player api显示进度。使用 iframe youtube player api 播放视频
【发布时间】：2020-06-10 01:31:35
【问题描述】：

我使用他们的 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);
});

以下是用户界面的外观：

【问题讨论】：

你能显示更多代码吗？什么样的 observable 是“源”。它从哪里获取事件
Source 只是一个来自 rxjs 的普通 Observable。常量来源：Observable = interval(10000);
你在使用OnPush吗？
没有。那是什么？我是 Javascript 的初学者
你能显示更多代码吗？或者创建一个 stackblitz 来展示你的问题。同时显示你的 cleanTime() 方法

标签： javascript angular typescript youtube-iframe-api

【解决方案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

【讨论】：