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

Question

媒体元素 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

I've faced the same issue. It seems that ChiChou's answer was finally used. If you update mediaElement at least to the version of the 31/08/2014 (2.15.1). You should be fine! https://github.com/johndyer/mediaelement/issues/483

Answer 4

你必须改变你的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">

并检查。希望这会帮助你。