How are controls sized in mediaelement.js

Question

I'm using mediaelement.js for an audio player that has a limited amount of space available. I need to include custom styling for the controls and have most of the CSS worked out. Where I'm running into trouble is that the mediaelement.js script is applying CSS widths to some of the control elements. I'm willing to modify my CSS to compensate for this, but I'm not sure the process that mediaelement.js goes through to arrive at its calculated widths.

So what are the steps mediaelement.js goes through to calculate the size of its controls?

Answer 1

Found the thing I needed to solve my problem: It's not documented on the web site, but mediaelement.js allows for an option to be set "autosizeProgress" which defaults to true. Setting this to false allows the progress bar to be set to a specific size, which makes styling the controls in my instance much easier.

Answer 2

The problem:

I wanted to replace an old flash-only control on all my customer's church and ministry websites with this IPAD-friendly control, but the old control worked fine at only 180px width, and this one didn't, certainly not for longer clips. (MediaElement.js version: 2.13.1)

Initial tests:

---

The solution:

You can programmatically make the audioplayer automatically resize volume control and hide duration if the rendered control size is calculated to be too small to accommodate them.

After making these changes, the control is still usable at widths down as low as 160px wide (if a bit tight)

---

CSS settings for volume control width:

The initial horizontal volume control width (as used in audio mode) is set in mediaelementplayer.css here:

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

... and here:

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

... but leave these alone to set them automatically - I'll show you that in a minute.

---

How to do it:

First, to have the duration control hide automatically if the display is less than 260px, make this change to 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

Now to have the volume control for audio reduce from 60px to 30px if the total width is less than 220px, make these two changes to mediaelement-and-player.js:

Change this:

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

... to this:

'<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

---

Tests after code modifications described:

Here's how it looks with a long sound clip (greater than 1 hour) at various sizes, all paused at exactly 30 minutes so you can see how they compare:

I hope that this is of use, and sincerely thank John Dyer for this amazing system, and for making it all available to us all.