plyr-resolution-selector

    0.0.3 • Public • Published

    Plyr Resolution Selector

    Adds a resolution selector control to the Plyr HTML5 video player to allow users to switch between video qualities.



    Plyr Resolution Switcher

    Install

    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.

    Usage

    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].plyr
    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"]')

    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.

    Install

    npm i plyr-resolution-selector

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • roflmuffin