diff --git a/example.html b/example.html
index 62cc32e..d19c469 100644
--- a/example.html
+++ b/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
}
])
diff --git a/lib/videojs-resolution-switcher.js b/lib/videojs-resolution-switcher.js
index 2a29486..b92d549 100644
--- a/lib/videojs-resolution-switcher.js
+++ b/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 tag inside