Video.js Resolution Switcher

Resolution switcher for video.js v5

Example

Working examples of the plugin you can check out if you're having trouble. Or check out this demo.

Getting Started

Install plugin with

npm

npm i videojs-resolution-switcher

or bower

bower install videojs-resolution-switcher

Setup sources dynamically:

<video id='video' class="video-js vjs-default-skin"></video>
<script src="video.js"></script>
<script src="videojs-resolution-switcher.js"></script>
<script>
  videojs('video', {
    controls: true,
    plugins: {
        videoJsResolutionSwitcher: {
          default: 'high',
          dynamicLabel: true
        }
      }
  }, function(){
  
    // Add dynamically sources via updateSrc method
    player.updateSrc([
        {
          src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
          type: 'video/webm',
          label: '360'
        },
        {
          src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
          type: 'video/mp4',
          label: '720'
        }
      ])

      player.on('resolutionchange', function(){
        console.info('Source changed to %s', player.src())
      })
      
  })
</script>

Or use <source> tags:

<video id="video" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'>
   <source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" type='video/mp4' label='SD' />
   <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD'/>
</video>
<script>
  videojs('video').videoJsResolutionSwitcher()
</script>

YouTube tech

YouTube tech form https://github.com/eXon/videojs-youtube

<video id='video' class="video-js vjs-default-skin"></video>
<script src="../lib/videojs-resolution-switcher.js"></script>
<script>
	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')
		})
	});

</script>

Flash tech

When using flash tech preload="auto" is required.

Source options

Sources can passed to player using updateSrc method or <source> tag as shown above. Avalible options for each source are:

• label - String (required) is shown in menu (ex. 'SD' or '360p')
• res - Number is resolution of video used for sorting (ex. 360 or 1080)

Plugin options

You can pass options to plugin like this:

videojs('video', {
      controls: true,
      muted: true,
      width: 1000,
      plugins: {
        videoJsResolutionSwitcher: {
          default: 'low'
        }
      }
    }, function(){
      // this is player
    })

Avalible options:

• default - {Number}|'low'|'high' - default resolution. If any Number is passed plugin will try to choose source based on res parameter. If low or high is passed, plugin will choose respectively worse or best resolution (if res parameter is specified). If res parameter is not specified plugin assumes that sources array is sorted from best to worse.
• dynamicLabel - {Boolean} - if true current label will be displayed in control bar. By default gear icon is displayed.
• customSourcePicker - {Function} - custom function for selecting source.
• ui - {Boolean} - If set to false button will not be displayed in control bar. Default is true.

Methods

updateSrc([source])

Returns video.js player object if used as setter. If source is not passed it acts like player.src()

// Update video sources
player.updateSrc([
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'SD' },
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'HD' },
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: '4k' }
])

PARAMETERS:

name	type	required	description
source	array	no	array of sources

currentResolution([label], [customSourcePicker])

If used as getter returns current resolution object:

  {
    label: 'SD', // current label
    sources: [
      { type: "video/webm", src: "http://www.example.com/path/to/video.webm", label: 'SD' },
      { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: 'SD' }
    ] // array of sources with current label
  }

If used as setter returns video.js player object.

// Get current resolution
player.currentResolution(); // returns object {label '', sources: []}

// Set resolution
player.currentResolution('SD'); // returns videojs player object

PARAMETERS:

name	type	required	description
label	string	no	label name
customSourcePicker	function	no	cutom function to choose source

customSourcePicker

If there is more than one source with the same label, player will choose source automatically. This behavior can be changed if customSourcePicker is passed.

customSourcePicker must return player object.

player.currentResolution('SD', function(_player, _sources, _label){
  return _player.src(_sources[0]); \\ Always select first source in array
});

customSourcePicker accepst 3 arguments.

name	type	required	description
player	Object	yes	videojs player object
sources	Array	no	array of sources
label	String	no	name of label

customSourcePicker may be passed in options when player is initialized:

var myCustomSrcPicker = function(_p, _s, _l){
  // select any source you want
  return _p.src(selectedSource);
}

videojs('video', {
      controls: true,
      muted: true,
      width: 1000,
      plugins: {
        videoJsResolutionSwitcher: {
          default: 'low',
          customSourcePicker: myCustomSrcPicker
        }
      }
    }, function(){
      // this is player
    })

getGroupedSrc()

Returns sources grouped by label, resolution and type.

Events

resolutionchange EVENT

Fired when resolution is changed