时间戳

首页 > 解决方案 > 如何避免在重定向到另一个页面之前卸载视频？

javascript - 如何避免在重定向到另一个页面之前卸载视频？

问题描述

我使用视频作为主页的背景，当它加载或卸载时，容器的背景为绿色会有一点延迟。我试图通过使用预加载器来避免这种情况，这解决了页面加载时的问题，但是当它重定向时，它仍然有第二个视频在离开页面之前卸载，并且背景是纯绿色

视频容器：

<div class="site-blocks-cover overlay" data-aos="fade" data-stellar-background-ratio="0.5">
        <video autoplay muted loop id="myVideo">
            <source src="./images/massage.mp4" type="video/mp4">
        </video>

        <div class="container">
            <div class="row align-items-center justify-content-center text-center">

                <div class="col-md-10">

                    <div class="row justify-content-center mb-4">
                        <div class="col-md-10 text-center">
                            <h1 data-aos="fade-up" class="mb-5">We give solutions to your <span class="typed-words"></span></h1>

                            <p data-aos="fade-up" data-aos-delay="100"><a href="contact.html" class="btn btn-primary btn-pill">Book Now</a></p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

以下是现场演示的链接：https ://acrabaca.yetitech.nz/index.html

任何帮助，将不胜感激

标签： javascripthtmlcss

解决方案

如果您在离开之前删除视频元素，它会停止 Chrome 中的绿色闪烁。下面的一段 JavaScript 将点击处理程序添加到锚标记，以便在页面导航之前删除视频。仍然有灰色闪光，但没有绿色闪光那么刺耳。至于为什么会发生，我不确定。

document.querySelectorAll('a').forEach(a => {
  a.addEventListener('click', () => { 
    document.querySelectorAll('video').forEach(v => v.remove());
  });
});

推荐阅读