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 <source>
elements.
<video>
<source res="480" src="..." type="..." />
<source res="240" src="..." type="..." />
</video>
or in code, simply specify 'res' as an additional property of your video sources.
player.source({
type: '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 = plyr.setup()[0]
PlyrResSelector.use(player)
By default, the <select>
element will be inserted after the volume bar, but you can insert it after another control as such:
PlyrResSelector.use(player, 'plyr__progress')
or even
PlyrResSelector.use(player, '[data-plyr="mute"]')
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.