HTML5 视频在本机全屏模式下不会最大化超出容器尺寸

2024-01-29

我遇到了一个非常有趣的跨浏览器 HTML5/CSS 问题:每当有动画时-webkit-animation-fill-mode: both;附加到包含 HTML5 的 DIVvideo元素,该视频在原生 HTML5 全屏模式下不会填满整个窗口,即全屏下的视频大小将限制为父元素尺寸。

描述可能会令人困惑,所以我创建了一个简化的示例:http://jsfiddle.net/7SsPa/3/embedded/result/ http://jsfiddle.net/7SsPa/3/embedded/result/

(注意:jsFiddle 根本不允许全屏模式,但它可以让您了解发生的情况。要查看启用全屏的相同代码,您可以在此处打开它:https://dl.dropboxusercontent.com/u/3635046/fullscreen.html https://dl.dropboxusercontent.com/u/3635046/fullscreen.html)

我们尝试了几种 JS 视频播放器(video.js、flowplayer 等),所有这些播放器都存在此问题,并且与任何特定的 JS 库无关。

为了让事情变得更简单,这段代码只能在 webkit 浏览器中运行,但我在 Firefox 中得到了相同的行为。奇怪之处超出了视频维度。在真实的网站上,我们观察到 z-index 和其他页面元素的问题,即全屏模式根本不是全屏。另请注意,示例中的动画只是为了简单起见而采用原始动画。

去除-webkit-animation-fill-mode解决一切。我不确定这是一个错误还是一些我无法理解的晦涩的 HTML/CSS 行为,但问题是:

有没有办法实现正确的全屏模式并保留 -webkit-animation-fill-mode 属性?全屏激活时可能可以通过 JS 删除“.animated”类,但我正在寻找更干净的解决方案。注意:包含元素有一定的尺寸(它是一个模态窗口),有边距并被其他元素包围,即我们不能只将其宽度/高度设置为 100%。

谢谢。


添加以下 CSS 应该可以解决这个问题:

:-webkit-full-screen-ancestor {
    animation: none;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}

Via: https://bugs.chromium.org/p/chromium/issues/detail?id=501246#c13 https://bugs.chromium.org/p/chromium/issues/detail?id=501246#c13

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

HTML5 视频在本机全屏模式下不会最大化超出容器尺寸 的相关文章

  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 禁用输入中的空格,并允许后退箭头?

    我试图禁用用户名文本字段中的空格 但是我的代码也禁用后退箭头 有什么办法也允许后退箭头吗 function var txt input UserName var func function txt val txt val replace s
  • HTML标签阻止HTML标签被执行?

    我想问超级用户的基本问题 但我认为这是一个编程问题 我刚刚开始学习 HTML 所以请耐心等待 如何防止程序解释 HTML 标签 语法 例如 我想写一个这样的闪存卡 html 代码为 lt is lt 我想要一个适用于任何或大多数语法的解决方
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • IE bug:具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 为什么我不能在 TCPDF 表中使用 č,ć,đ 图表?

    我正在为我的网站构建一个 tcpdf 文件 该 tcpdf 文件中有一个包含一些数据的表格 但我无法使该章程正常工作 对于编码 我使用 windows 1250 宪章女巫不起作用 我已经尝试过 utf 8 但仍然没有得到这个章程 tcpdf
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 是否可以使“HTML 到语音”与“文本到语音”相同?

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的

随机推荐