Control multiple videos with one control ngx-plyr

Question

I want to control multiple videos with one custom control, i've created minimal repo here https://stackblitz.com/edit/ngx-plyr-cxla4q?file=src%2Fapp%2Fapp.component.html i've tried using querySelectorAll then listen to an event but not working. did anyone know how to do it?

EDIT

I have found the solutions, here's what i got

i change plyr tag to

then i initiate the player using this code

this.listPlayer = Plyr.setup('.js-player', { controls });

and then in play function i have this

  play(): void {
    this.listPlayer.map(
      e => {
        e.play();
        e.config.muted = true;
        e.config.volume = 0;
      }
    )
  }

which solution is the best practices if u compare @yogen darji solution to mine?

user_2247541 · Answer

There are multiple mistakes,

Use ViewChildren to query all your PlyrComponent

@ViewChildren(PlyrComponent) plyr: QueryList;
Loop through list of components and play each

this.plyr.toArray().forEach(plyr => plyr.player.play());

Sample code with HTML and TS




@ViewChildren(PlyrComponent) plyr: QueryList;
play(): void {
    this.plyr.toArray().forEach(plyr => plyr.player.play());
    console.log(this.elements);        
}

stop(): void {
    this.plyr.toArray().forEach(plyr => plyr.player.stop());        
}

Check this updated stackblitz

Control multiple videos with one control ngx-plyr

1 Answers