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

Question

我正在将mediaelement.js用于可用空间有限的音频播放器。我需要为控件包含自定义样式，并且已经完成了大部分CSS。我遇到麻烦的是mediaelement.js脚本正在将CSS宽度应用于某些控件元素。我愿意修改我的CSS以弥补这一点，但我不确定mediaelement.js通过它来计算宽度的过程。

那么mediaelement.js计算其控件大小的步骤是什么？

Answer 1

找到解决我问题所需的东西：它没有记录在网站上，但是mediaelement.js允许设置一个选项“autosizeProgress”，默认为true。将此设置为false允许将进度条设置为特定大小，这样可以更轻松地为我的实例 中的控件设置样式。

Answer 2

问题：

我想用这个IPAD友好的控件替换我所有客户的教堂和事工网站上的旧的仅闪存控件，但旧的控件只能在180px宽度下正常工作，而且这个没有，当然不会更长剪辑。 （MediaElement.js版本：2.13.1）

初步测试：

---

解决方案：

如果渲染的控件尺寸计算得太小而无法容纳，您可以以编程方式自动调整音量控制和隐藏持续时间他们。

进行这些更改后，控件仍可在宽度低至 160px宽（如果有点紧张）时使用

---

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

现在，如果总宽度小于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这个神奇的系统，以及让所有人都可以使用它。