在没有任何插件的情况下延迟加载 javascript 或 jquery 中的视频

Question

我尝试使用 jquery 延迟加载视频。我对图像和背景图像使用了相同的延迟加载技术，它工作得很好，但是当我在视频中使用相同的技术时，它不起作用。到目前为止我做了什么。

将源 src 属性更改为 data-src 属性
当 dom 准备就绪后，将 data-src 属性更改为具有相同值的 src。

这是我的代码

HTML


<div class="video-section">
            <video muted loop autoplay preload="auto">
            <source data-src="hello.mp4" type="video/mp4">
            </video>
        </div>

Javascript


let video_url=$("video source").attr("data-src");
$("video source").attr("src",video_url);

Answer 1

检查这是否适合您。

var video_url=$("video source ").attr("data-src");

alert('Window loaded')

$(window).on('load', function(){
$("source").attr("src", video_url);
});

.video-section{width:450px; height:300px; border: 1px solid red}
.video-section video{width:100%; height:100%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-section">
            <video width="320" height="240" controls autoplay>
  <source data-src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">

  Your browser does not support the video tag.
</video>
        </div>

Answer 2

视频需要调用.load()，如下：

<video_id>.load();

在没有任何插件的情况下延迟加载 javascript 或 jquery 中的视频

Lazy load video in javascript or jquery without any plugin

html

javascript

css

jquery

lazy-loading