Video.js resolution switcher

https://github.com/kmoskwiak/videojs-resolution-switcher

Set sources dynamically

  videojs('video', {
    controls: true,
    plugins: {
      videoJsResolutionSwitcher: {
        default: 'low', // Default resolution [{Number}, 'low', 'high'],
        dynamicLabel: true
      }
    }
  }, function(){
    var player = this;
    window.player = player
    player.updateSrc([
      {
        src: 'https://vjs.zencdn.net/v/oceans.mp4?SD',
        type: 'video/mp4',
        label: 'SD',
        res: 360
      },
      {
        src: 'https://vjs.zencdn.net/v/oceans.mp4?HD',
        type: 'video/mp4',
        label: 'HD',
        res: 720
      }
    ])
    player.on('resolutionchange', function(){
      console.info('Source changed to %s', player.src())
    })
  })
        

Set sources inside <video> tag

<video id="video_1" class="video-js vjs-default-skin" controls data-setup='{}' >
  <source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480' />
  <source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/>
  <source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/>
  <source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/>
</video>
        

Use flash tech

  videojs('video', {
    controls: true,
    techOrder: ['flash'],
    preload: 'auto',
    plugins: {
      videoJsResolutionSwitcher: {
        default: 'low', // Default resolution [{Number}, 'low', 'high'],
        dynamicLabel: true
      }
    }
  }, function(){
    var player = this;
    window.player = player
    player.updateSrc([
      {
        src: 'https://vjs.zencdn.net/v/oceans.mp4?SD',
        type: 'video/mp4',
        label: 'SD',
        res: 360
      },
      {
        src: 'https://vjs.zencdn.net/v/oceans.mp4?HD',
        type: 'video/mp4',
        label: 'HD',
        res: 720
      }
    ])
    player.on('resolutionchange', function(){
      console.info('Source changed to %s', player.src())
    })
  })
        

Use YouTube tech

videojs('video', {
 controls: true,
 techOrder:  ["youtube"],
 sources: [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=iD_MyDbP_ZE"}],
 plugins: {
  videoJsResolutionSwitcher: {
   default: 'low',
   dynamicLabel: true
  }
 }
}, function(){
 var player = this;
 player.on('resolutionchange', function(){
  console.info('Source changed')
 })
});