媒体元素 2.12.0
这只发生在 FF 和 Chrome(而不是 IE 或 Opera)中。在导航到具有媒体元素播放器的站点内容后,甚至到媒体元素首页http://mediaelementjs.com/都有一个播放器。
当浏览器缩放设置为正常(通常按 Ctrl+0)时,它看起来没问题。
当缩放增加时(通过按 Ctrl++ 或 Ctrl+ 滚动鼠标滚轮),音量控制将放置在整个元素下方。
上面的屏幕截图是在比正常放大一级的情况下进行的。
有没有办法让它在所有浏览器缩放中看起来都很好?
媒体元素 2.12.0
这只发生在 FF 和 Chrome(而不是 IE 或 Opera)中。在导航到具有媒体元素播放器的站点内容后,甚至到媒体元素首页http://mediaelementjs.com/都有一个播放器。
当浏览器缩放设置为正常(通常按 Ctrl+0)时,它看起来没问题。
当缩放增加时(通过按 Ctrl++ 或 Ctrl+ 滚动鼠标滚轮),音量控制将放置在整个元素下方。
上面的屏幕截图是在比正常放大一级的情况下进行的。
有没有办法让它在所有浏览器缩放中看起来都很好?
似乎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);
我通过更改以下行将其修复在文件 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);
希望这可以帮助。
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
你必须改变你的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">
并检查。希望这会帮助你。