Problem:

I wanted to replace the old flash-only control on all the sites of our customers and ministries with this control that supports iPad, but the old control worked fine only with a width of 180 pixels, and this, of course, was no longer than the clips. (version MediaElement.js: 2.13.1)

Initial Tests:

Decision:

, .

- 160 ( )

CSS :

( ) ​​ mediaelementplayer.css :

/* horizontal version */
.mejs-controls div.mejs-horizontal-volume-slider {
    height: 26px;
    width: 60px;         /* <== this line */
    position: relative;
}

... :

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    position: absolute;
    left: 0;
    top: 11px;
    width: 50px;        /* <== and this line */

... , , - .

:

, , 260 , mediaelement-and-player.js:

buildduration: function(player, controls, layers, media) {
    var t = this;
    if (parseInt(t.width)<260){ return; } // Add this to hide duration if width < 260px

, 60 30 , 220 , mediaelement-and-player.js:

:

'<div class="mejs-horizontal-volume-slider">'+ // outer background
    '<div class="mejs-horizontal-volume-total"'></div>'+ // line background

... :

'<div class="mejs-horizontal-volume-slider"'+
  (parseInt(t.width)<220 ? ' style="width:30px"' : '')+
  '>'+ // outer background
    '<div class="mejs-horizontal-volume-total"'+
      (parseInt(t.width)<220 ? ' style="width:20px"' : '')+
      '></div>'+ // line background

:

, ( 1 ) , 30 , , :

, , .