Question

77

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

rated 0 times [ 84] [ 7] / answers: 1 / hits: 30869 / 9 Years ago, wed, december 2, 2015, 12:00:00

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

Only authorized users can answer the question. Please sign in first, or register a free account.

ronaldodarioc

Add To Favorites

Follow

Total Points: 441

Total Questions: 105

Total Answers: 106

Location: Christmas Island

Member since Sun, Mar 7, 2021

3 Years ago

answered 9 Years ago jordenfabiand · Accepted Answer

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

  });

});