Plyr: Setting up multiple players doesn't work

[Reqrefusion]

I use bootstrap tabs in my projekt. There will be player on each of them which tab content but secon one html5 player. This is odd because i use very basic code. And you can see my codepen example.

https://codepen.io/turan-furkan-topak/pen/ompBrX

You can see my problem if you click on Video2 tab in example.

[sampotts]

Hey,

As per the docs, you need to set up each player individually or use the static Plyr.setup method and pass as selector to it. Otherwise you're using the Constructor which will only setup one player (since it's a class).

Here you go:
https://codepen.io/sampotts/pen/KJZZMx

Note: Plyr.setup will return an array of players it sets up. If you want better control over reference to the players. You can always add an id on the elements and loop or something:

const players = {};

Array.from(document.querySelectorAll('video')).forEach(video => {
    players[video.id] = new Plyr(video, { ...options });
});

[sampotts]

Updated the title for others in future to find it easier.

[HybridSolutions]

The instructions are not very clear for multiple instances.
You have const player = new Plyr(document.querySelectorAll('.js-player')); but this will not apply the player to all the instances, and i believe that's why there's some confusion.

If Plyr accepts that line of code, then this

 Array.from(document.querySelectorAll('video')).forEach(video => {
    players[video.id] = new Plyr(video, { ...options });
});

could be done internally.

Also, you don't show how to specify options when using const players = Plyr.setup('.js-player'); in the instructions.

I assume the correct way is:

const players = Plyr.setup('.mediaplayer', { captions: {active: true}, tooltips: {controls: true, seek: true} });

These issues could be improved in the documentation for clear understanting on how the player works..

Keep up the great work!

[sampotts]

I’ll make a change to the docs

[EndiHariadi43]

Maybe you want to see what I have done? https://codepen.io/anon/pen/gZYEme . And I managed to make a video gallery with plyr http://prntscr.com/scxvo0