延迟加载HTML5视频直到页面其他内容加载完成

Question

我正在构建一个页面，其中一个部分的背景是使用视频元素。我试图通过将src存储为data-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);
    });
}

- Jon Hendershot

---

我不太了解PHP，但是你的source标签上不是需要一个src属性吗？<source data-src="<?php echo get_template_directory_uri(); ?>/contact_Footer.mp4" type="video/mp4"> - zer00ne

目前使用JavaScript从'data-src'属性中获取URL，并将src从占位符小GIF切换为存储的视频URL。忘记添加小GIF占位符的src！ :) - Jon Hendershot

针对YouTube视频的悬停效果：https://dev59.com/7mw05IYBdhLWcg3wkivX#62523325 - Ciro Santilli OurBigBook.com

Answer 1

你可以使用'.load()'和'.play()'手动触发视频加载和播放，分别针对'source'元素的父级元素使用'parentElement'实现此操作：

$(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();
  });
});

- guest271314

---

只是一个关于更容易调用数据标签的提示 $(this).data('src') = $(this).attr('data-src')，但除此之外没有其他变化。加一！^^ - treyBake