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

Question

我有一个视频元素用作我正在构建的页面底部部分的背景。我正在尝试通过将 src 存储为 data-src 属性并在其他资产加载后使用 jQuery 将其应用于 src 属性来为其构建一种 'lazy-load' （因为它不是英雄形象或任何东西，我想加载海报以节省加载时间，然后稍后加载视频）。它似乎根本不适合我。正确应用了 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);
    });
}

Answer 1

您可以分别使用“.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();
  });
});

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

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

html

javascript

jquery

lazy-loading

html5-video