延迟加载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);
    });
}

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