Chargement de plusieurs dizaines de vidéos sur une page

Bonjour,

Alors voilà : j'ai une page avec une cinquantaine de vignettes de vidéos qui sont des liens vers des pages dédiées. Lorsque je passe la souris au survol d'une vignette, une petite boucle vidéo de quelques secondes se lit. En local pas de soucis évidemment, par contre en ligne, toutes ces vidéos qui font chacune environ 1 Mo prennent du temps à se charger, un peu toutes en même temps je pense, et ça marche plutôt pas. Il va falloir attendre longtemps avant que les boucles se lancent sur certaines par exemple, ou bien elle ne se lanceront pas du tout. D'autres si.

J'installe les gestionnaires d'événements au mouseover une fois que les vidéos peuvent être lues, donc lorsque l'événement canplay est lancé. En jQuery ça donne quelque chose comme ça :

$( document ).ready(function() {

    $('.loop').on('canplay', function(){

        $(this).parent().mouseenter(function () {
            $(this).find('video').get(0).play();
        });  
        
        $(this).parent().mouseleave(function () {       
            $(this).find('video').get(0).pause();
            $(this).find('video').get(0).currentTime = 0;
        });
    });
});

Qu'en pensez-vous ? Faudrait-il que je mette en place un système plus poussé de chargement des vidéos les unes après les autres ?

Salut,

Tu devrais plutôt ne pas les charger toutes au chargement de la page, et charger uniquement celle qui t'intéresse au hover. C'est comme cela que ça marche sur youtube. Faut optimiser tes vidéos par contre 1mo c'est trop.