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

【问题标题】：Animate on Scroll (AOS) animations do not work when HTML5 video element is on page当 HTML5 视频元素在页面上时，滚动动画 (AOS) 动画不起作用
【发布时间】：2018-10-23 21:53:57
【问题描述】：

我的页面上有一个 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 开发控制台“实时编辑”它时，动画再次开始工作。

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

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

【问题讨论】：

在进一步的检查和测试中，动画似乎确实有效，但它们触发得太早了......我认为是因为视频的全宽和结果高。我们如何确保 AOS 在触发动画时考虑到视频元素的高度？
aaaa 并且经过进一步检查，似乎仅当视频元素包含在父 div 中时才会出现问题。如果视频元素只是在代码中浮动（本质上是元素的子元素），那么动画会按预期运行。不过，这似乎仍然是一种错误……为什么它在包含在 div 中时不能工作？有什么办法吗？
这是一个小提琴。要查看动画效果，请从视频元素中删除
包装器：jsfiddle.net/x4t1gb9L

标签： javascript animation scroll html5-video

【解决方案1】：

我能够通过给视频元素一个绝对位置来“解决”这个问题，然后在同一个父 div 中添加一个 1600x900px 透明 PNG 以将整个父容器“拉伸”到 16x9 视频的高度。

【讨论】：

【解决方案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%;
    }

【讨论】：