在页面的其余部分完成加载后，延迟加载html5视频

Delay loading of html5 video after the rest of the page finished loading

本文关键字：加载 延迟加载 视频 html5 余部      更新时间：2023-09-26

我有一个视频元素被用作我正在构建的页面底部部分的背景。我试图通过将src存储为数据src属性，并在其他资产加载后使用jQuery将其应用于src属性，为其构建一种"懒惰加载"（由于它不是英雄图像或任何东西，我想加载海报以节省剪切加载时间，然后稍后加载视频）。这似乎对我根本不起作用。src属性应用正确，但视频没有加载或自动播放。我是不是从错误的角度来看待这个问题？有更好的方法来实现它吗？

建立在wordpress上。

基本HTML

<video width="100%" loop controls autoplay class="connect-bg">
    <source data-src="<?php echo get_template_directory_uri(); ?>/contact_Footer.mp4" type="video/mp4">
</video>

jQuery函数

$(window).load(function(){
    footer_lazyloader();
});
function footer_lazyloader() {
    var $ = jQuery;
    $("video.connect-bg source").each(function(){
        var sourceFile = $(this).attr('data-src');
        $(this).attr('src',sourceFile);
    });
}

您可以分别使用'.load（）和'.play（）手动触发视频加载和播放。使用"parentElement"以"source"元素的父元素为目标来完成此操作：

$(function() {
  $("video.connect-bg source").each(function() {
    var sourceFile = $(this).attr("data-src");
    $(this).attr("src", sourceFile);
    var video = this.parentElement;
    video.load();
    video.play();
  });
});
相关文章：