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开发者控制台“实时编辑”该视频时，动画又重新开始工作。

我也将其实时编辑到AOS页面（https://michalsnik.github.io/aos/）中，它也破坏了其中的动画。当我将视频移到页面底部时，动画也起作用了。

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

Answer 1

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

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）动画不起作用

2 个答案: