视频延迟加载-背景

Question

我想使用视频作为我网站的背景。我有这个：

<video autoplay muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy">
 <source src="{{ asset('img/web/video/intro_video.webm') }}" type="video/webm">
</video>

它工作得很好，但我想要实现的是延迟加载。我想先加载 css 和 js，然后开始加载视频，而且，如果加载了视频，我想自动播放它。

上面的代码无法正常工作，并且它会在慢速互联网连接上阻止我的 css 和 js（视频大约有 9MB）。

有什么解决办法吗？非常感谢。

Answer 1

你的代码看起来不错。但有一个小小的改变。如果存在

preload

，则忽略

autoplay

属性。

document.addEventListener("DOMContentLoaded", function() {
    var lazyVideo = document.getElementById('lazyVideo');
    // Function to play the video 

  });

<video id="lazyVideo" muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy">
 <source src="{{ asset('img/web/video/intro_video.webm') }}" type="video/webm">
</video>