Plyr Resolution Selector
Adds a resolution selector control to the Plyr HTML5 video player to allow users to switch between video qualities.
You can use bower (
bower install plyr-resolution-selector), npm (
npm install plyr-resolution-selector), or download the source from this repo. This plugin was built against version 1.8.2 and is untested against previous versions.
Add an extra attribute to your
or in code, simply specify 'res' as an additional property of your video sources.
playersourcetype: 'video'title: 'Video Title'sources:src: '/path/to/movie.mp4'type: 'video/mp4'res: '480'src: '/path/to/movie.mp4'type: 'video/mp4'res: '720';
Enable the plugin once the
Plyr has been setup.
var player = plyr0plyrPlyrResSelector
By default, the
<select> element will be inserted after the volume bar, but you can insert it after another control as such:
Styling the select
The plugin does not include any styling apart from changing the font color & margin, so the select will appear in the browsers default style. The element has the classname
plyr__resolution in a similar fashion to other Plyr control, so simply target this classname to restyle.