diff --git a/README.md b/README.md
index 1452051..4c7cb00 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,13 @@ Setup sources dynamically:
```
@@ -77,7 +83,8 @@ videojs('video', {
})
```
### 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.
+* 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.
## Example
diff --git a/example.html b/example.html
index b73db35..f0285da 100644
--- a/example.html
+++ b/example.html
@@ -38,11 +38,11 @@
-
-
-
-
-
+
+
+
+
+
@@ -55,7 +55,8 @@
width: 1000,
plugins: {
videoJsResolutionSwitcher: {
- default: 'high' // Default resolution [{Number}, 'low', 'high']
+ default: 'high', // Default resolution [{Number}, 'low', 'high'],
+ dynamicLabel: true // Display dynamic labels or gear symbol
}
}
}, function(){
diff --git a/lib/videojs-resolution-switcher.css b/lib/videojs-resolution-switcher.css
index 57bafa1..d82c8d6 100644
--- a/lib/videojs-resolution-switcher.css
+++ b/lib/videojs-resolution-switcher.css
@@ -1,10 +1,24 @@
.vjs-resolution-button {
color: #ccc;
- font-family: VideoJS
+ font-family: VideoJS;
}
-.vjs-resolution-button:before {
- content: '\f110'
+.vjs-resolution-button .vjs-resolution-button-staticlabel:before {
+ content: '\f110';
+ font-size: 1.8em;
+ line-height: 1.67;
+}
+
+.vjs-resolution-button .vjs-resolution-button-label {
+ font-size: 1.2em;
+ line-height: 2.50em;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ box-sizing: inherit;
}
.vjs-resolution-button ul.vjs-menu-content {
diff --git a/lib/videojs-resolution-switcher.js b/lib/videojs-resolution-switcher.js
index 9ca2a3c..90e5342 100644
--- a/lib/videojs-resolution-switcher.js
+++ b/lib/videojs-resolution-switcher.js
@@ -14,7 +14,10 @@
*/
videoJsResolutionSwitcher = function(options) {
var settings = videojs.mergeOptions(defaults, options),
- player = this;
+ player = this,
+ label = document.createElement('span');
+
+ label.classList.add('vjs-resolution-button-label')
/*
* Resolution menu item
@@ -31,11 +34,17 @@
this.on('touchstart', this.onClick)
},
onClick: function(){
+ console.log(this.el().parentNode.children)
+ this.el().parentNode.children.forEach(function(el){
+ el.classList.remove('vjs-selected')
+ })
// Hide bigPlayButton
player.bigPlayButton.hide()
// Remember player state
var currentTime = player.currentTime()
var isPaused = player.paused()
+ // Change menu button label
+ label.innerHTML = this.options_.label;
// 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)
@@ -54,7 +63,15 @@
constructor: function(player, options){
this.sources = options.sources;
MenuButton.call(this, player, options);
- this.controlText('Quality')
+ this.controlText('Quality');
+
+ if(settings.dynamicLabel){
+ this.el().appendChild(label)
+ }else{
+ var staticLabel = document.createElement('span')
+ staticLabel.classList.add('vjs-resolution-button-staticlabel')
+ this.el().appendChild(staticLabel)
+ }
},
createItems: function(){
var sources = this.sources;
@@ -79,13 +96,15 @@
player.controlBar.resolutionSwitcher.dispose()
delete player.controlBar.resolutionSwitcher
}
- //Sort sourcec
+ //Sort sources
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(chooseSrc(src));
+ var newSource = chooseSrc(src)
+ label.innerHTML = newSource.label
+ player.src(newSource);
}
/**
@@ -130,11 +149,12 @@
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
+ return src[src.length - 1]
}
// Create resolution switcher for videos form tag inside
if(player.options_.sources.length > 1){
+ console.log(player.options_.sources)
player.updateSrc(player.options_.sources)
}