如何避免在重定向到另一個頁面之前卸載視頻？

Question

我正在使用視頻作為主頁的背景，當它加載或卸載時，容器具有綠色背景的地方會有一個小的延遲。 我試圖通過使用預加載器來避免這種情況，這在頁面加載時解決了這個問題，但是當它重定向時它仍然有一個時間在離開頁面之前卸載視頻，並且背景是純綠色

視頻容器：

<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

任何幫助，將不勝感激

Answer 1

如果您在離開之前刪除視頻元素，它會停止 Chrome 中的綠色 flash。 JavaScript 的以下片段將點擊處理程序添加到錨標記，以便在頁面導航之前刪除視頻。 仍然有一個灰色的 flash，但它不像綠色的 flash 那樣刺耳。至於為什么會這樣，我不確定。

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