Hey, we are using Plyr now (https://github.com/Selz/plyr).
All the docs are on their GitHub page.
If you know how to edit SCSS or LESS, just grab the sources here, edit & compile them and include in your theme or some other way that won’t be overwritten during Sermon Manager update
Or you could write your own CSS and target specific classes.
Whatever you find easier 🙂
Okay thanks.
I’ve just been reading through the documentation there now, and I have a couple more questions:
In the Quick Setup section at https://github.com/selz/plyr#html it states:
“Include the plyr.js script before the closing </body> tag” – which of course is standard practice for JS files anyway, to improve page loading speed. However, I noticed that you’ve put this file into the <head> section instead. Is there any reason for that?
I noticed that the plyr.js and plyr.css files are both loaded on every page of the website, even on pages when the player is not being used (ie. non-sermon pages). Is there any chance you can modify it so that these two files only load on pages where the player is actually needed, eg. using an ‘if’ statement in the function that loads these two files, so that the function only fires on sermon pages? That would help to keep the other, non-sermon pages a little bit more efficient with their load times.
Hey @germankiwi,
You’re spot on and we’re certainly aware of those best practices, not sure how that was missed. Thanks for the reminder.
We’ll get that sorted out asap!
PS: We have contacted plyr to build in ability to have a download button on their player and they said they will get that included soon. So that feature is coming too. We love the fact that this player is customizable, giving the users more flexibility. We may put an option in the settings to enable this or not, if we find people prefer the browser defaults for some reason. But we’ll wait to see what the feedback is.
Thanks!
So a download button on the player itself would just download the MP3 file directly, right? Wouldn’t that make the “MP3” link, underneath the “Download Files” heading, redundant?
I guess if we have the option to enable or disable it, then we could decide whether we want it or not.
I was also impressed with how customisable Plyr is, according to their documentation at https://github.com/selz/plyr#html. Although it wasn’t clear to me how I could implement the various options listed there on my own site if I wanted to. For example there’s a table on their documentation page called “Options”, the values of which “must be passed as an object to the setup() method as above or as JSON in data-plyr attribute”. Is that possible somehow with Sermon Manager’s implementation?
Hey @germankiwi,
Yeah spot on, and true, it would. It’s not something to remove however since (as you probably know) browsers have varying compatiblities. So not all of the plyr functionality will show up for people using Opera for example.
In the Pro version of the Sermon Manager we will introduce a bundle of new settings including a bunch for plyr, so it’s nice and easy to use (or not) it’s features.
Thanks!
I’ll answer your second question.
Yes, it’s possible to edit the Plyr JS.
Here’s the line where Plyr is initialized.
But do note that your changes will be deleted every time the plugin is updated.
As Igor said, we will introduce more options in the future.
Thanks @nikolam – I reckon I’ll wait for Pro to come out with the options you mentioned – that will be the easiest way to customise things.
@wpforchurch – regarding the future download button in the player – what I mean is that I reckon it ought to be possible to disable any such download button, if the web designer wants to stick to the “MP3” download link underneath the player and not have an additional download button on the player itself – right? That shouldn’t have anything to do with browser compatibility because we’re talking about removing an existing button, not adding anything.
Incidentally, I just loaded one of my sermon pages in Opera and the player looks and functions exactly the same as in Chrome – the buttons, slider, volume, everything is identical. Which is great of course! 🙂
