Question

我遇到了一个非常有趣的跨浏览器HTML5 / CSS问题：每当有一个包含HTML5 -webkit-animation-fill-mode: both;元素的DIV附加动画video时，此视频就不会填充本机的整个窗口HTML5全屏模式，即全屏视频大小将限制为父元素尺寸。

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

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

我们尝试了几个JS视频播放器（video.js，流动播放器等），所有这些播放器都存在问题，并且与任何特定的JS库无关。

为了简化操作，此代码仅适用于webkit浏览器，但我在Firefox中也有相同的行为。这种古怪超越了视频维度。在真实的网站上，我们观察到了z-index和其他页面元素的问题，即全屏模式根本不是全屏模式。另请注意，为简单起见，示例中的动画只是原始的。

删除-webkit-animation-fill-mode可以解决所有问题。我不确定这是一个我无法理解的错误或一些模糊的HTML / CSS行为，但问题是：

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

谢谢。

Answer 1

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

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

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

Answer 2

以百分比形式给出高度和宽度的尺寸。

例如：width：100％

Answer 3

我遇到了同样的问题，但仅限于webkit浏览器。当任何内容全屏显示时，我会给body标签指定一个特定的类，并在退出时删除它;

$(document).on('webkitfullscreenchange', function(){
   if(document.webkitFullscreenElement !== null) {
      $('body').addClass('in-fullscreen');
   } else {
      $('body').removeClass('in-fullscreen');
   }
});

现在很容易覆盖有问题的css属性;

.in-fullscreen .container {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}

在原生全屏模式下，HTML5视频不会超出容器尺寸

3 个答案: