一个控制ngx-plyr控制多个视频
Control multiple videos with one control ngx-plyr
我想用一个自定义控件控制多个视频,我在这里创建了最小的回购 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 解决方案与我的解决方案进行比较,哪种解决方案是最佳实践?
有多个错误,
使用ViewChildren
查询你所有的PlyrComponent
@ViewChildren(PlyrComponent) plyr: QueryList<PlyrComponent>;
遍历组件列表并播放每个组件
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
我想用一个自定义控件控制多个视频,我在这里创建了最小的回购 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 解决方案与我的解决方案进行比较,哪种解决方案是最佳实践?
有多个错误,
使用
ViewChildren
查询你所有的PlyrComponent
@ViewChildren(PlyrComponent) plyr: QueryList<PlyrComponent>;
遍历组件列表并播放每个组件
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