default src

example.html

@@ -52,7 +52,12 @@
     videojs('video', {
       controls: true,
       muted: true,
-      width: 1000
+      width: 1000,
+      plugins: {
+        videoJsResolutionSwitcher: {
+          default: 'low' // Default resolution [{Number}, 'low', 'high']
+        }
+      }
     }, function(){
       var player = this;
       window.player = player
@@ -61,12 +66,14 @@
         {
           src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
           type: 'video/webm',
-          label: 'SD'
+          label: 'SD',
+          res: 360
         },
         {
           src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
           type: 'video/mp4',
-          label: 'HD'
+          label: 'HD',
+          res: 720
         }
       ])
 

lib/videojs-resolution-switcher.js

@@ -4,10 +4,9 @@
 (function(window, videojs) {
   'use strict';
 
-  var defaults = {
-        option: true
-      },
-      videoJsResolutionSwitcher;
+  var defaults = {},
+      videoJsResolutionSwitcher,
+      groupedSrc;
 
   /**
    * Initialize the plugin.
@@ -33,18 +32,13 @@
       onClick: function(){
         // Hide bigPlayButton
         player.bigPlayButton.hide()
-
         // Remember player state
         var currentTime = player.currentTime()
         var isPaused = player.paused()
-
         // Change player source and wait for loadedmetadata event, then play video
         player.src({src: this.src, type: this.type}).one( 'loadedmetadata', function() {
           player.currentTime(currentTime)
-
-          if(!isPaused){
-            player.play()
-          }
+          if(!isPaused){ player.play() }
           player.trigger('resolutionchange')
         })
       }
@@ -58,17 +52,12 @@
     var ResolutionMenuButton = videojs.extends(MenuButton, {
       constructor: function(player, options){
         this.sources = options.sources;
-
         MenuButton.call(this, player, options);
-
         this.controlText('Quality')
-
       },
       createItems: function(){
-
-        var sources = this.sources.sort(compareResolutions);
+        var sources = this.sources;
         var menuItems = [];
-
         for(var i = 0; i < sources.length; i++){
           menuItems.push(new ResolutionMenuItem(player, {
             label: sources[i].label,
@@ -76,27 +65,26 @@
             type: sources[i].type
           }))
         }
-
         return menuItems;
       }
     })
 
 
     player.updateSrc = function(src){
-
       //Return current src if src is not given
       if(!src){ return player.src() }
-
       // Dispose old resolution menu button before adding new sources
       if(player.controlBar.resolutionSwitcher){
         player.controlBar.resolutionSwitcher.dispose()
         delete player.controlBar.resolutionSwitcher
       }
+      //Sort sourcec
+      src = src.sort(compareResolutions)
+      groupedSrc = bucketSources(src)
       var menuButton = new ResolutionMenuButton(player, { sources: src });
       menuButton.el().classList.add('vjs-resolution-button')
       player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton)
-
-      player.src(src);
+      player.src(chooseSrc(src));
     }
 
     /**
@@ -110,6 +98,40 @@
       return (+b.res)-(+a.res);
     }
 
+    /**
+     * Group sources by label, resolution and type
+     * @param   {Array}  src Array of sources
+     * @returns {Object} grouped sources: { label: {}, res: {}, type: {} }
+     */
+    function bucketSources(src){
+      var resolutions = {
+        label: {},
+        res: {},
+        type: {}
+      }
+      for(var i = 0; i<src.length; i++){
+        resolutions.label[src[i].label] = resolutions.label[src[i].label] || []
+        resolutions.res[src[i].res] = resolutions.res[src[i].res] || []
+        resolutions.type[src[i].type] = resolutions.type[src[i].type] || []
+        resolutions.label[src[i].label].push(src[i])
+        resolutions.res[src[i].res].push(src[i])
+        resolutions.type[src[i].type].push(src[i])
+      }
+      return resolutions
+    }
+
+    /**
+     * Choose src if option.default is specified
+     * @param   {Array}  src Array of sources
+     * @returns {Object} source object
+     */
+    function chooseSrc(src){
+      if(settings.default === 'low'){ return src[src.length - 1] }
+      if(settings.default === 'high'){ return src[0] }
+      if(groupedSrc.res[settings.default]){ return groupedSrc.res[settings.default][0] }
+      return src
+    }
+
     // Create resolution switcher for videos form <source> tag inside <video>
     if(player.options_.sources.length > 1){
       player.updateSrc(player.options_.sources)