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

2024-05-08

媒体元素2.12.0

这种情况仅发生在 FF 和 Chrome 中(而不会发生在 IE 或 Opera 中)。导航到具有媒体元素播放器的网站内容后,甚至导航到媒体元素首页http://mediaelementjs.com/ http://mediaelementjs.com/有一个玩家。

当浏览器缩放设置为“正常”(通常按 Ctrl+0)时,看起来不错。

当缩放增加时(通过按 Ctrl 或 Ctrl 滚动鼠标滚轮),音量控件将放置在整个元素的下方。

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

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


看来孩子们div.mejs-controls缩放页面时溢出,但这不是 CSS 的情况。的大小div.mejs-时间轨道由Javascript动态生成。 (https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845 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 https://github.com/johndyer/mediaelement/blob/master/src/js/mep-player.js#L845),修改如下

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

to

total.width(railWidth - (total.outerWidth(true) - total.width()) - 1);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

增加浏览器缩放时 mediaelement.js 音量控制混乱 的相关文章

  • 将 CSS 生成的三角形拆分为 2 个水平不同的相同颜色

    正如您应该能够通过此代码看到的那样fiddle http jsfiddle net Xh36r 1 以及下面 我希望能够分割显示在第二个 div 顶部的 CSS 生成的三角形水平均等在 之间orange and green使用的颜色 现在它
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB
  • Bootstrap 中的旋转字形 / Font Awesome

    我试图让引导站点中的字形在悬停时旋转 除了更改颜色之外 这是我的尝试 http jsfiddle net young greedo17 88g5P http jsfiddle net young greedo17 88g5P 使用此代码 d
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • 为什么此 TTF 字体在我的浏览器中无法使用?

    我下载了一种名为 Clunk 的 TTF 字体 并尝试将其应用于某些文本 这是我正在使用的代码 h1 Test h1 这似乎不起作用 Chrome 给了我两个错误 Failed to decode downloaded font path
  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作
  • 将特定字形与网络字体一起使用

    使用网络字体 我想使用字体功能设置 CSS 中的选项以及跨度类HTML 中 以便使用字体集中的特定替代字形 我需要以正确的语法使用哪些值 GID Unicode 才能定位特定的目标glyph内glyph备择方案 这些功能使用 OpenTyp
  • 是否可以设置输入文本值的样式?

    我想知道是否可以设置输入框值的样式 such http jsfiddle net aCwhY as
  • 将图像编码为base64有什么效果?

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小
  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • LESS CSS 语法对现代化很有用

    通常我使用现代化 http modernizr com 了解浏览器的功能 同时 我用LESS CSS http lesscss org 使我的CSS更具可读性和可维护性 使用 LESS 嵌套规则的常见样式如下所示 header color
  • CSS3变换:悬停时翻译,带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • 如何防止弹性项目高度因其内容而溢出[重复]

    这个问题在这里已经有答案了 我刚刚开始学习 Flex 到目前为止我印象深刻 但是 我对包含页眉 页脚和三列的全页应用程序遇到了问题 第一列包含一个项目列表 由于我无法为其父级设置固定高度 因此每次列表增长时 它都会将页脚向下推 这是一个带有
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

随机推荐

  • 如何在 TYPO3 扩展中设置内容元素或插件的图标

    如何为内容元素和插件配置图标 有没有快捷方式可以只配置一次而不是在 3 个地方配置 AFAIK 有3个地方可以配置icons在创建新的自定义内容元素和插件时TYPO3后端 新内容元素向导 编辑内容元素 CE 时 CType list typ
  • 在 Eclipse Testrunner 中使用名称的 ParameterizedTest

    当您使用 Eclipse TestRunner 运行 JUnit 4 ParameterizedTest 时 图形表示相当愚蠢 对于每个测试 您都有一个名为 0 1 ETC 是否可以进行测试 0 1 等显式名称 实施一个toString测试
  • scanf() 不等待用户输入[重复]

    这个问题在这里已经有答案了 我正在使用 c 中的双向链表来制作树 我在该函数中使用递归调用 但不知何故它不起作用 我的代码是 struct node int data struct node right struct node left s
  • 如何在 conda 中静音或抑制 gfortran (或 clang?)后端?

    我一直致力于构建一个非常特殊的 conda 环境 专为python and R与串扰使用rpy2 我想出的方法可以安装正确的R包如下 install main environment sh now date T echo Start Tim
  • string() 类型的值无法转换为字符串

    我不断收到此错误 我尝试了所有可能的方法 但它仍然显示 String 的值类型无法转换为字符串 这是代码 Private Sub Label1 Click sender As Object e As EventArgs Handles La
  • PHP - 从图像创建一张图像

    我有 n 张图像 想用 php 代码创建一张 我使用 imagecopymerge 但无法成功 请举一些例子 Code numberOfImages 3 x 940 y 420 background imagecreatetruecolor
  • 限制 WooCommerce 上的域名注册

    如何限制用户电子邮件对 WooCommerce 注册中特定域的访问 我发现这段代码可以做到这一点 但由于某种原因它在 WooCommerce 注册表单上不起作用 如果我进入 WP 登录页面 它就会起作用 任何帮助表示赞赏 function
  • 恢复后如何挑选提交?

    我正在研究我的feature branch并在审核后合并到development待部署 后来 一位同事决定发布一个版本 并将他和我的合并到master 在部署时 他意识到他的代码有错误并恢复了master 在我们的分叉和拉动流程中 这意味着
  • 保存时出现 iphone 核心数据未解决的错误

    尝试保存时 我从核心数据中收到一条奇怪的错误消息 但问题是错误不可重现 在执行不同任务时 它会在不同时间出现 错误消息 Unresolved error Domain NSCocoaErrorDomain Code 1560 UserInf
  • 整数转浮点数

    这段代码的工作原理 posToXY Float gt Float gt Integer posToXY a b do let y a b round y 但这不起作用 posToXY Integer gt Integer gt Intege
  • Pandas:根据是否为 ​​NaN 来移动列

    我有一个像这样的数据框 phone number 1 clean phone number 2 clean phone number 3 clean NaN NaN 8546987 8316589 8751369 NaN 4569874 N
  • 计算 .NET Core 项目的代码指标?

    我正在研究 ASP NET Core 和 NET Core 项目 对于经典的 C 项目 Visual Studio 2015 具有计算代码指标的功能 对于 NET Core 预览版 2 工具中缺少支持 在工具更加完整之前 有人知道解决方法吗
  • Emacs 强制组织模式捕获缓冲区在新窗口中打开

    如何强制组织模式的捕获缓冲区在新窗口中打开 我试过 setq special display regexps Capture 但它不起作用 我立即看到一个新窗口 然后 org mode 进行两个垂直分割 我使用 3 个垂直分割 并将捕获缓冲
  • Sencha-touch :保存登录名/密码(保存会话,多任务)

    我有一个 Java Web 应用程序 其中移动部分是用 Sencha touch 开发的 当我启动 sencha touch 应用程序时 她询问我的登录名 密码 因为该应用程序的访问受到限制 但是我想保存用户的登录名 密码 sencha t
  • ruby 调试和黄瓜

    我在 Cucumber 中遇到了失败的情况 我想使用 ruby debug 来调试我的 Rails 控制器 但是 如果我将 调试器 添加到我想要中断的位置 它就不会停止 我尝试将 ruby debug 和 ruby gems 的 requi
  • f# 运行总计序列

    好吧 这看起来应该很容易 但我就是不明白 如果我有一个数字序列 如何生成由运行总计组成的新序列 例如 对于序列 1 2 3 4 我想将其映射到 1 3 6 10 以适当的功能方式 Use List scan https msdn micro
  • Lua中按字符分割字符串

    我有像这样的字符串 ABC DEF 我需要将它们分开 字符并将两个部分分别分配给一个变量 在 Ruby 中 我会这样做 a b ABC DEF split 显然Lua没有这么简单的方法 经过一番挖掘后 我找不到一种简短的方法来实现我所追求的
  • 结构化 scala 案例类的自定义 json 序列化

    我有一些用于往返 scala 案例类的工作 jackson scala 模块代码 Jackson 对于平面案例类非常有用 但是当我制作一个包含其他案例类列表的案例时 我似乎需要很多代码 考虑 abstract class Message c
  • iOS UITest:如何找到UITableViewCell的AccessoryView?

    你好我正在学习UITests now 我有个问题 如何检测accessoryView的点击tableViewCell 在UI测试中 下面是我的tableViewCell 我想要检测细节闭合配件视图水龙头 像这样 app tables cel
  • 增加浏览器缩放时 mediaelement.js 音量控制混乱

    媒体元素2 12 0 这种情况仅发生在 FF 和 Chrome 中 而不会发生在 IE 或 Opera 中 导航到具有媒体元素播放器的网站内容后 甚至导航到媒体元素首页http mediaelementjs com http mediael