CODEWITHSUNDEEP
javascriptangulartypescriptyoutube-iframe-api
user2995358
user2995358

Reputation: 1017

Display progress of . video playing using Iframe youtube player api

I've embedded youtube video using their ipframe API. I am able to load a video and play. However, I want to show the current time of the video on the UI. It never refreshes until there is UI event, like I click on a button. I am using Angular 8. here is my template code:

...
<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>

Here is my component code:

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

Here is how the UI looks: Progress vlue stays empty until some UI event like button click happens.

Upvotes: 1

Views: 1781

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71911

Just like I expected :) your events come from a non so called monkey patched event system within the youtube library. Any events fired from here are not patched by the zone.js and therefore will run outside of the angular NgZone.

To fix this, you need to inject the NgZone and use the ngZone.run() to get your code back into the change detection:

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

Upvotes: 3

Related Questions