HTML5 视频元素在页面上时，滚动动画 (AOS) 动画不起作用

Question

我的页面上有一个 HTML5 视频元素，但我的动画不工作。他们在网站的每个其他页面上工作。这是我的视频代码：

<div class="video-wrapper">
    <div class="video">
       <video poster="/images/video.png" autoplay="" loop="" muted="" playsinline="">
           <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
       </video>
    </div>
</div>

该视频元素位于页面顶部，在所有动画项目之上。当我将视频移动到动画项目下方（到页脚）、完全删除视频或使用 firefox 开发控制台 "live edit" 将其移除时，动画再次开始工作。

我还将它实时编辑到 AOS 页面 (https://michalsnik.github.io/aos/) 并且它也破坏了那里的动画。当我将视频移到该页面的底部时，动画也起作用了。

这是 HTML5 视频和 AOS 的已知兼容性问题吗？有什么办法可以解决这个问题吗？

Answer 1

我能够 "fix" 通过给视频元素一个绝对位置，然后在同一个父 div 到 "stretch" 整个父元素中添加一个 1600x900 像素的透明 PNG 来解决这个问题容器到 16x9 视频的高度。

Answer 2

这是我使用的代码。

HTML

    <section id="sec1" class="position-relative">
        <img class="w-100 d-block" src="assets/images/eyes-masked.jpg" alt="eyes-masked">
        <video class="d-block w-100 video" playsinline autoplay muted loop>
            <source id="mp4_src" src="assets/images/eyes.mp4" type="video/mp4">
            No tiene visor de video. Actualice su navegador.
        </video>
    </section>

CSS

    .video {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

HTML5 视频元素在页面上时，滚动动画 (AOS) 动画不起作用

Animate on Scroll (AOS) animations do not work when HTML5 video element is on page

javascript

animation

scroll

html5-video