在 javascript 或 jquery 中延迟加载视频，无需任何插件

Question

我尝试使用 jquery 延迟加载视频。我对图像和背景图像使用了相同的延迟加载技术，它工作得很好，但是当我在视频中使用相同的技术时，它不起作用。到现在为止我做了什么。将源 src 属性更改为 data-src 属性当 dom 准备好后，将 data-src 属性更改为具有相同值的 src 。这是我的代码超文本标记语言<div class="video-section">            <video muted loop autoplay preload="auto">            <source data-src="hello.mp4" type="video/mp4">            </video>        </div>JavaScriptlet 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();