Video.js Resolution Switcher

A revolutionary plugin for video.js

Getting Started

Once you've added the plugin script to your page, you can use it with any video:

<video id='video'></video>
<script src="video.js"></script>
<script src="videojs-resolution-switcher.js"></script>
<script>
  videojs('video', {
    controls: true
  }, function(){
  
    // Add dynamically sources via newVideoSources method
    player.newVideoSources([
        {
          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())
      })
      
  }).videoJsResolutionSwitcher();
</script>

There's also a working example of the plugin you can check out if you're having trouble.

Methods

newVideoSources([source])


// Update video sources
player.newVideoSources([
  { 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", lable: 'HD' },
  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4", label: '4k' }
])

PARAMETERS:

source Array array of sources

Events

resolutionchange `EVENT`

Fired when resolution is changed

1.5 KiB Raw Blame History