mediaelement.js - mediaelement.js 中控件的大小如何

Question

我将 mediaelement.js 用于可用空间有限的音频播放器。我需要为控件添加自定义样式，并完成大部分 CSS。我遇到麻烦的地方是 mediaelement.js 脚本将 CSS 宽度应用于某些控制元素。我愿意修改我的 CSS 来弥补这一点，但我不确定 mediaelement.js 为达到其计算宽度所经历的过程。

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

Answer 1

找到了解决问题所需的东西：网站上没有记录，但 mediaelement.js 允许将选项设置为“autosizeProgress”，默认为 true。将此设置为 false 允许将进度条设置为特定大小，这使得我的实例中的控件样式更加容易。

Answer 2

问题：

我想用这个适用于 IPAD 的控件替换我所有客户的教堂和事工网站上的旧的仅 Flash 控件，但旧控件在只有 180 像素宽度时工作正常，而这个没有，当然不适用于更长的剪辑。（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

如果总宽度小于 220 像素，现在要将音频的音量控制从 60 像素减少到 30 像素，请对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 提供了这个令人惊叹的系统，并让我们所有人都可以使用它。