diff --git a/button-styles.css b/button-styles.css index 23ea6b1..e70a197 100644 --- a/button-styles.css +++ b/button-styles.css @@ -21,4 +21,11 @@ ul li.vjs-menu-title.vjs-res-menu-title:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; +} + +/* Needed to keep text visible in video.js 4.9 */ +.vjs-res-button .vjs-control-text { + width: auto; + height: auto; + clip: auto; } \ No newline at end of file diff --git a/video-quality-selector.js b/video-quality-selector.js index e86da62..23e4b43 100644 --- a/video-quality-selector.js +++ b/video-quality-selector.js @@ -117,11 +117,17 @@ // Call the parent constructor _V_.MenuButton.call( this, player, options ); + + // Set the button text based on the option provided + this.el().firstChild.firstChild.innerHTML = options.buttonText; } }); + // Set class for resolution selector button + _V_.ResolutionSelector.prototype.className = 'vjs-res-button'; + // Create a menu item for each available resolution - _V_.ResolutionSelector.prototype.createItems = function() { + _V_.ResolutionSelector.prototype.createItems = function() { var player = this.player(), items = [], @@ -338,7 +344,7 @@ button_node_count--; - if ( 'vjs-current-res' == button_nodes[button_node_count].className ) { + if ( 'vjs-control-text' == button_nodes[button_node_count].className ) { button_nodes[button_node_count].innerHTML = methods.res_label( target_resolution ); break; @@ -361,16 +367,7 @@ // Add the resolution selector button resolutionSelector = new _V_.ResolutionSelector( player, { - - el : _V_.Component.prototype.createEl( null, { - - className : 'vjs-res-button vjs-menu-button vjs-control', - innerHTML : '
' + ( current_res || 'Quality' ) + '
', - role : 'button', - 'aria-live' : 'polite', // let the screen reader user know that the text of the button may change - tabIndex : 0 - - }), + buttonText : ( current_res || 'Quality' ), available_res : available_res });