用一个控制 ngx-plyr 控制多个视频

Question

我想用一个自定义控件控制多个视频，我在这里创建了最小的 repo https://stackblitz.com/edit/ngx-plyr-cxla4q?file=src%2Fapp%2Fapp.component.html 我尝试使用 querySelectorAll 然后收听一个事件但不工作。有人知道怎么做吗？

编辑

我已经找到了解决方案，这就是我得到的

我把 plyr 标签改成

<video controls crossorigin playsinline
  data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" class="js-player">
  <!-- Video files -->
  <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"
    size="576" />
  <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4"
    size="720" />
  <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4"
    size="1080" />
</video>

然后我使用此代码启动播放器

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

然后在播放功能中我有这个

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

如果您将@yogen darji 解决方案与我的解决方案进行比较，哪种解决方案是最佳实践？

Answer 1

有多个错误，

1. 使用ViewChildren查询你所有的PlyrComponent

   @ViewChildren(PlyrComponent) plyr: QueryList<PlyrComponent>;

2. 遍历组件列表并播放每个组件

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

带有 HTML 和 TS 的示例代码

<plyr class="player"  plyrTitle="Video 1" [plyrSources]="videoSources"
 (plyrInit)="player = $event" (plyrPlay)="played($event)"></plyr>
<plyr class="player" appMakered plyrTitle="Video 2" [plyrSources]="videoSources2"
  (plyrInit)="player = $event" (plyrPlay)="played($event)"></plyr>

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

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

查看此更新的stackblitz