在 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>

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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <video width="320" height="240" controls autoplay>&nbsp; <source data-src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">&nbsp; Your browser does not support the video tag.</video>&nbsp; &nbsp; &nbsp; &nbsp; </div>

Answer 2

您需要调用.load()视频，如下所示：<video_id>.load();