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

【问题标题】：mediaelement.js volume control messed when increasing browser zoom增加浏览器缩放时 mediaelement.js 音量控制混乱
【发布时间】：2013-06-24 09:37:59
【问题描述】：

媒体元素 2.12.0

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

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

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

上面的截图是在正常放大一级的情况下制作的。

有没有办法让它在所有浏览器缩放中看起来都很好？

【问题讨论】：

无法重现，FF 22.0 Mac OS X 10.6
这个错误已经存在至少一年了。 github.com/johndyer/mediaelement/issues/483

标签： css zooming mediaelement.js

【解决方案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);

【讨论】：

请忽略之前的评论 - 这似乎是最好的解决方案，您也可以对其进行猴子修补，而不是更改 mejs 代码。
我有一个非常具体的应用程序，我每次都知道确切的大小，所以我设置了 .mejs-time-rail { width: 196px !important;并且效果很好。谢谢！！

【解决方案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);

希望这会有所帮助。

【讨论】：

【解决方案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">

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

【讨论】：

在什么情况下加width:100%有帮助？我看不出有什么不同。
在 div 'mep_0' 中，我将宽度从 380px 更改为 440px 并在 div 'mejs-inner.您可以使用 mep_0 潜水中 witdth 的增量/减量来检查您的输出。希望这会对你有所帮助。
这与另一个答案基本相同，只是扩大播放器而不是缩小内部。它在所有缩放级别上仍然看起来不正确。
其实当你缩放时，div 'mep_0' 的宽度并没有改变，它得到了 380px 的宽度，你必须检查这里应用的是哪个 css。还有一个变化，我注意到如果我将 div "div{class='grid_5 push_1'}" 的宽度更改为 400px 并且 'mep_0' 宽度 = 100%，那么它就在这里工作。一旦你必须尝试这个

【解决方案4】：

我也遇到过同样的问题。看来池州的回答终于用上了。如果您至少将 mediaElement 更新到 31/08/2014 (2.15.1) 的版本。你应该没事！ https://github.com/johndyer/mediaelement/issues/483

【讨论】：