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 视频在本机全屏模式下不会最大化超出容器尺寸 的相关文章

随机推荐