Plyr: v3 and multiple instances

[DanielRuf]

The new version exports only Plyr which has no setup method.

[friday]

You shouldn't upgrade to major software releases and expect them to not break the API.

Changelog etc here: #766

This in particular should be of interest to you: https://github.com/sampotts/plyr/blob/beta/readme.md#javascript-1

[DanielRuf]

I know but it still mentions the NodeList example.

[DanielRuf]

This does not work:

const player = new Plyr(document.querySelectorAll('.js-player'));

[friday]

From the documentation section I linked to:

"A NodeList or Array of HTMLElement - the first element will be used"

This does what you want:

const players = Array.prototype.map.call(document.querySelectorAll('.js-player'), el => new Plyr(el));

[DanielRuf]

I know. We did it with a loop over the NodeList but the example makes not much sense when the full NodeList is not traversed at all ;-)

[friday]

Then don't use NodeList...

[sampotts]

Yep, .setup() was removed in favour of a proper class and one to one relationship with element vs instance. It was getting a little messy with allowing whatever in and then spitting out an array with one or many instances back. This way is cleaner and as you've found out if a developer wants to setup multiple players it's as easy as...

const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));

The example is just to show a NodeList is _accepted_ as a value. It doesn't necessarily make it the _best_ for any scenario. It's really because I added support for passing jQuery objects which are always an array of elements as I'm sure you know.

I'll update the docs to make this a little clearer.

[DanielRuf]

I'll update the docs to make this a little clearer.

Thanks.