增加浏览器缩放时，mediaelement.js音量控制混乱

Question

Media Element 2.12.0

这仅在FF和Chrome中发生（而不是在IE或Opera中）。导航到具有媒体元素播放器的网站内容后，甚至到媒体元素首页http://mediaelementjs.com/都有一个播放器。

当浏览器缩放设置为“正常”时（通常按Ctrl + 0），它看起来没问题。

当缩放增加时（按Ctrl +或Ctrl +滚动鼠标滚轮），音量控制将放在整个元素下方。

上面的屏幕截图是在比正常情况更大的一级进行的。

有没有一种方法可以让它在所有浏览器缩放中看起来都很好？

Answer 1

在扩展页面时，似乎 div.mejs-controls 的子项溢出，但它不是CSS案例。 div.mejs-time-rail 的大小由Javascript动态生成。 （https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845）

我发现了一个可以简单解决问题的技巧，即将div.mejs-time-rail的宽度减少1px。

所以我在这里得到了一个快速修复。在mep-player.js，第845行（https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845）中，修改以下

total.width(railWidth - (total.outerWidth(true) - total.width()));

到

total.width(railWidth - (total.outerWidth(true) - total.width()) - 1);

Answer 2

我通过改变以下行将文件固定在文件mediaelement-and-player.js中

line 2705 insert **- 40**
// fit the rail into the remaining space
railWidth = t.controls.width() - usedWidth - 40 - (rail.outerWidth(true) - rail.width());

line 2713 change to
total.width(railWidth - (total.outerWidth(true) - total.width()) - 5);

希望这有帮助。

Answer 3

你必须改变你的CSS并设置宽度像

<div id="mep_0" class="mejs-container svg mejs-audio" style="width: 440px; height: 30px;">
<div class="mejs-inner" style="width:100%;">
<div class="mejs-mediaelement">

并检查。希望这会对你有所帮助。

Answer 4

我遇到了同样的问题。似乎ChiChou的答案终于被使用了。如果您将mediaElement至少更新为31/08/2014（2.15.1）的版本。你应该没事！ https://github.com/johndyer/mediaelement/issues/483