Loading video asynchronously

Question

What i am trying

I'm making changes to website and we have a header which is 100vw and 100vh at load. This header contains a video which acts as a background.

<video preload="auto" autoplay muted loop="loop" id="header_background_video">
    <source src="<?= $header['achtergrond']['url']; ?>" type="video/mp4">
</video>

It's a wordpress site and it links to a video which is hosted on the same site. Whenever we try to speedtest the site through google's tool and gtmetrix we find that the size of the video is giving us a bad rating. The biggest speed problem of all.

We have tried several things:

Compressing the video even until it is blurry
Converting to webm
Converting to webm and compressing it.
Shorten the video till 5 seconds which is way to short but still same problem.

Disabling the autoplay in the html element seems to help but that would completely screw up the header.

I did research

after research I found that loading a video asynchronously would fix the problem even the video is on autoplay. I tried searching for a valid tutorial that works that doesnt contain third party apps like wistia.com but I can't find them.

My question Is their a way to load a video asynchronously?

EDIT

I tried to do this but this didn't work. I adjusted some of the values to the one used on the site.

function lazy_load() { ?>
    <script>
        window.addEventListener('load', (event) => {
            footer_lazyloader();
        });


        function footer_lazyloader() {
            $(function() {
                $("video#header_background_video source").each(function() {
                    var sourceFile = $(this).attr("data-src");
                    $(this).attr("src", sourceFile);
                    var video = this.parentElement;
                    video.load();
                    video.play();
                });
            });
        }
    </script>
<?php }
add_action('wp_footer', 'lazy_load');

The video html element now looks like

<video muted loop="loop" id="header_background_video">
    <source src="<?= $header['achtergrond']['url']; ?>" type="video/mp4">
</video>

Does this answer your question? [Delay loading of html5 video after the rest of the page finished loading](https://stackoverflow.com/questions/34033115/delay-loading-of-html5-video-after-the-rest-of-the-page-finished-loading) — Howard E, Jul 21 '22 at 10:52
@HowardE I tried to apply your solution as described in the post you linked but it doesnt resolve the issue. — MathyB, Jul 21 '22 at 11:26

score 0 · Answer 1 · edited Apr 24 '23 at 08:35

0

Try adding preload attribute inside the video tag. It will load the video after the complete page load. https://www.w3schools.com/tags/att_video_preload.asp

edited Apr 24 '23 at 08:35

dns_nx

3,651
4
37
66

answered Jul 21 '22 at 12:24

Dotsquares

755
1
2
10

Loading video asynchronously

1 Answers1