在Chrome中使用animate.css时出现全屏视频问题 [英] Full screen video issue when using animate.css in Chrome

问题描述

我有一个使用视频标签的视频页面。另外，我的页面使用animate.css为我的元素添加一些动画。问题是，当我在animate.css中使用样式时，我的视频无法正确显示全屏。这是我的页面样本：

 < div id =wrapper> 
< div id =page-wrapperclass =gray-bg dashbard-1> 
< h2 id =sv_title>以下是一些文字说明< / h2> 
 
< div class =animated fadeInRight> 
< video src =http://www.w3schools.com/html/mov_bbb.mp4controls =>< / video> 
< / div> 
< / div> 
< / div> 
  

https://jsfiddle.net/p4nmt637/

另外，这个问题似乎只发生在chrome中，我在FireFox和Safari以及我测试了它没有这个问题。

这似乎是 Chrome漏洞。问题是由设置为 的动画填充模式造成的。这会使动画在视频父容器中处于活动状态，这似乎与全屏视频混淆。

解决方法

通过将其更改回默认值 none ，我们修复了全屏问题。在这个例子中，动画填充模式是通过 .custom 类改变的。

示例

在这个jsfiddle 中有一个工作示例。

/ *取消注释该类以修复* /

/ *
。自定义{
animation-fill-mode：none;


b

 < link href =https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css =stylesheet/> 
< h2 id =sv_title>这是个问题，底部视频在全屏显示时会在顶部分层显示。取消注释自定义类以查看它自身。< / h2> 
< div class =animated fadeInRight custom> 
< video src =http://www.w3schools.com/html/mov_bbb.mp4控制项>< / video> 
< / div> 
 
< div class =animated fadeInRight> 
  

I have a page that has a video using the video tag. Also, my page uses the animate.css to add some animations to my elements. The issue is that when I use a style in the animate.css, My video does not go to full screen correctly. This is a sample of my page:

<div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <h2 id="sv_title">Here is some text for illustration</h2>

        <div class="animated fadeInRight">
            <video src="http://www.w3schools.com/html/mov_bbb.mp4" controls=""></video>
        </div>
    </div>
</div>

https://jsfiddle.net/p4nmt637/

Also, this issue seems to happen only in chrome, I tested it in FireFox and Safari and I did not have this issue.

解决方案

This appears to be a Chrome bug. The problem is caused by the animation-fill-mode which is set to both. This keeps the animation active on the videos parent container, which seems to be messing with the full screen video.

Workaround

By changing this back to the default, none, we fix the full screen problem. In this example the animation fill mode is changed with the .custom class.

Example

There is a working example in this jsfiddle.

/*Uncomment the class to fix*/  

/*
.custom {
   animation-fill-mode: none;
}
*/

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css" rel="stylesheet" />
<h2 id="sv_title">This is the problem, the bottom video is being layered over the top when this is made fullscreen. Uncomment the custom class to see it fix itself.</h2>
<div class="animated fadeInRight custom">
  <video src="http://www.w3schools.com/html/mov_bbb.mp4" controls></video>
</div>

<div class="animated fadeInRight">
  <video src="http://www.w3schools.com/html/mov_bbb.mp4" autoplay muted></video>
</div>

这篇关于在Chrome中使用animate.css时出现全屏视频问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！