mediaelement.js音量控制在增加浏览器缩放时混乱 [英] mediaelement.js volume control messed when increasing browser zoom

问题描述

媒体元素2.12.0

这种情况仅发生在FF和Chrome（而不是IE或Opera）中。导航到具有媒体元素播放器的网站内容后，即使到媒体元素首页）

我发现了一个可以简单解决问题的小技巧， .mejs-time-rail by 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）; 
  

Media Element 2.12.0

This happens only in FF and Chrome (and not in IE or Opera). After navigating to site content which has media element player, even to Media Element front page http://mediaelementjs.com/ there is a player.

When the browser zoom is set to Normal (usually by pressing Ctrl+0) it looks OK.

When the zoom is increased (by pressing Ctrl++ or Ctrl+ scrolling mouse wheel) then the volume control is placed below the whole element.

The above screenshot was made at zoom one level larger from normal.

Is there a method to make it look good in all browser zooms?

解决方案

It seems that the children of div.mejs-controls overflowed when scaling the page, but it isn't a CSS case. The size of div.mejs-time-rail is generated by Javascript dynamically. (https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845)

I found a trick that can simply solve the problem, which is to decrease the width of div.mejs-time-rail by 1px.

So here I got a quick fix. In mep-player.js, line 845(https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845), modify following

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

to

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

这篇关于mediaelement.js音量控制在增加浏览器缩放时混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！