如何在mediaelement.js中调整控件的大小

Question

我使用mediaelement.js播放可用空间有限的音频播放器。我需要包括自定义样式的控件，并有大多数的CSS的工作。我遇到麻烦的地方是mediaelement.js脚本将CSS宽度应用于一些控件元素。我愿意修改我的CSS以弥补这一点，但我不确定mediaelement.js达到其计算宽度所经历的过程。

那么，mediaelement.js计算其控件大小需要经过哪些步骤呢？

Answer 1

我找到了解决我的问题所需要的东西:它没有在网站上记录，但是mediaelement.js允许设置一个选项"autosizeProgress“，它缺省为true。将其设置为false允许将进度条设置为特定的大小，这使得在我的实例中设置控件的样式变得更加容易。

Answer 2

问题是：

我想把客户所有教堂和事工网站上的旧的flash控件换成IPAD友好的控件，但旧的控件在宽度只有180px的情况下工作得很好，而这个就不行了，当然不适用于较长的视频片段。(MediaElement.js版本: 2.13.1)

初始测试：

​

​

解决方案：

您可以使音频播放器自动调整音量控制和隐藏持续时间，如果渲染的控件大小被计算为太小，无法容纳它们。

进行这些更改后，控件仍然可以在低至160px wide (如果有点紧)的宽度下使用

音量控制宽度的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-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

现在，如果总宽度小于220px，则将音频的音量控制从60px降低到30px，对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分钟时暂停，以便您可以看到它们的比较：

​

​

我希望这是有用的，并真诚地感谢John Dyer的这个令人惊叹的系统，并让我们所有人都可以使用它。