我使用的是具有可用空间有限的音频播放器mediaelement.js。我需要包括用于控制定制造型，并有大部分的CSS的制定。当我遇到麻烦的是，mediaelement.js脚本应用CSS宽度的一些控制元件。我愿意修改我的CSS来弥补这一点，但我不知道mediaelement.js过程经历在其宽度计算得出。

那么，什么是步骤mediaelement.js经过计算它的控件的大小？

Answer 1:

发现我需要解决我的问题的东西：它不记录在网站上，但mediaelement.js允许的选项设置“autosizeProgress”默认为真。将其设置为false，可以使进度条设置为特定的大小，这使得造型的控件在我的实例要容易得多。

Answer 2:

问题：

我想，以取代本IPAD友好的控制我的所有客户的教会和事工网站的一个老唯一闪光控制，但旧的控制工作的罚款只有180像素宽，而这一次没有，肯定不是更长的剪辑。 （MediaElement.js版本：2.13.1）

最初的测试：

解决方案：

您可以通过编程让audioplayer自动调整音量控制 ，如果呈现控件大小计算为太小，无法容纳他们， 隐藏时间 。

做出这些改变之后，控制是在宽度仍然可用下低至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 */

...... 但让这些单独自动设置他们-我会告诉你在一分钟内。

怎么做：

首先，自动有时间控制隐藏，如果显示的是小于260px，使这一变化的MediaElement和-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像素减少到30PX如果总宽度小于220px，使这两个变化到的MediaElement和- 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