Delay loading of html5 video

I have a video element being used as the background of a section towards the bottom of a page I'm building. I'm trying to build a sort of 'lazy-load' for it by storing the src as a data-src attribute and using jQuery to apply it to the src attribute after the other assets have loaded (since it's not a hero image or anything, I want to load a poster to save cut load-time and then load the video later). It doesn't seem to be working for me at all. The src attribute is applied correctly but the video doesn't load or autoplay. Am I approaching this from the wrong angle? Is there a better way to accomplish it?

Building on wordpress.

Basic 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 Function

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

Answers


You can manually trigger the video to load and play by using '.load()' and '.play()' respectively. Target the parent of the 'source' element using 'parentElement' to accomplish this:

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

Need Your Help

Is there a difference between boost iostream mapped file and boost interprocess mapped file?

c++ boost interprocess boost-interprocess boost-iostreams

I want to create a mapped binary file into memory; however I am not sure how to create the file to be mapped into the system. I read the documentation several times and realize there are 2 mapped f...

How to improve performance of ngRepeat over a huge dataset (angular.js)?

javascript angularjs angularjs-ng-repeat

I have a huge dataset of several thousand rows with around 10 fields each, about 2MBs of data. I need to display it in the browser. Most straightforward approach (fetch data, put it into $scope, le...