CODEWITHSUNDEEP
angular
John
John

Reputation: 91

@videogular/ngx-videogular make the video autoPlay the moment the component is loaded

I'm using the package @videogular/ngx-videogular for the video player in my app. Unfortunately, I'm not able to make the video play the moment that the component loaded (only by hitting the play button).

html.

    <section class="video" (onPlayerReady)="onPlayerReady($event)">
  <vg-player>
      <vg-controls>
          <vg-play-pause></vg-play-pause>
      </vg-controls>
      <video #media [vgMedia]="$any(media)" preload="auto" autoplay="true" crossorigin src="{{contentResponse?.data?.videoUrl}}">
          Your browser does not support the video tag.
      </video>
  </vg-player>
</section>

ts.

  api!: VgApiService



onPlayerReady(api: VgApiService) {
    this.api = api;
    this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(
        this.playVideo.bind(this)
      );
  }

  playVideo() {
    this.api.play();
  }

The video doest plays on component load. I have tried searching online about this issue but found nothing. does anyone know how can I solve this issue?

Upvotes: 0

Views: 1713

Answers (1)

Nube Colectiva
Nube Colectiva

Reputation: 292

The Videogular API is based on RxJS, so you can subscribe to Observables and react in consequence. To autoplay the videos, we need to listen for the loadedmetadata event.

Let’s add a new Subscription to play the video when the metadata is loaded:

export class AppComponent {
   // ...
 
   onPlayerReady(api: VgAPI) {
       this.api = api;
       this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(
           this.playVideo.bind(this)
       );
   }
 
   playVideo() {
      this.api.play();
   }
 
   // ...
}

We simply play the video via the VgAPI when the loadedMetadata observable is fired.

Upvotes: 1

Related Questions