web-dev-qa-db-fra.com

Retarder le chargement de la vidéo html5

J'ai un élément vidéo utilisé comme arrière-plan d'une section vers le bas d'une page que je crée. J'essaie de créer une sorte de `` chargement paresseux '' pour cela en stockant le src en tant qu'attribut data-src et en utilisant jQuery pour l'appliquer à l'attribut src après le chargement des autres actifs (car ce n'est pas une image de héros ou quoi que ce soit, je veux charger une affiche pour économiser le temps de chargement, puis charger la vidéo plus tard). Cela ne semble pas du tout fonctionner pour moi. L'attribut src est appliqué correctement mais la vidéo ne se charge pas ou n'est pas lue automatiquement. Suis-je en train de l'aborder sous le mauvais angle? Y a-t-il une meilleure façon de le faire?

S'appuyant sur wordpress.

HTML de base

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

fonction 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);
    });
}
javascriptjqueryhtmlhtml5-videolazy-loading
12
Jon Hendershot

Vous pouvez déclencher manuellement le chargement et la lecture de la vidéo en utilisant respectivement '.load ()' et '.play ()'. Ciblez le parent de l'élément 'source' en utilisant 'parentElement' pour accomplir ceci:

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