[Résolu] Prechargement de vidéo et lecture simultanée

Hello,

j'ai plusieurs videos sur une page avec leur source respective dans un data-src de la balise video.
J'arrive bien à les précharger via une requete xhr mais je n'arrive pas à les jouer seulement quand elles sont toutes chargées. Via mon code ci-dessous, elles se jouent forcément les unes après les autres. Je n'arrive pas à sortir le play() de la boucle en fait.
Je ne sais pas trop comment m'y prendre... j'ai besoin d'une lecture simultanée et synchronisée.

Merci pour vos tuyaux.

function preload_videos() {
    let all_videos = document.querySelectorAll('video');
                
    all_videos.forEach((video) => {
        var url = video.getAttribute('data-src');

        var xhrReq = new XMLHttpRequest();
        xhrReq.open('GET', url, true);
        xhrReq.responseType = 'blob';

        xhrReq.onload = function() {
            if (this.status === 200) {
                var videoBlob = this.response;
                var vid = URL.createObjectURL(videoBlob);
                video.src = vid;
                video.play();
            }
        }

        xhrReq.onerror = function() {
            console.log('erreur');
        }
           
        xhrReq.send();
    });
}

document.addEventListener("DOMContentLoaded", () => {
    preload_videos();
});

Modifié par Pedrothelion (24 May 2024 - 20:30)

Salut,

J'ai réécris votre fonction avec `fetch()` car ce protocole est plus moderne et désormais supporté partout (dans le même ordre d'idée je suis passé du snake_case au camelCase). Pour l'attente du chargement de toutes les vidéos j'ai utilisé `Promise.all()`. Je n'ai pas testé le code, à voir :

function preloadVideos() {
    let allVideos = document.querySelectorAll('video');
    let videoPromises = [];

    allVideos.forEach((video) => {
        let url = video.getAttribute('data-src');

        let videoPromise = fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erreur réseau');
                }
                return response.blob();
            })
            .then(videoBlob => {
                let vid = URL.createObjectURL(videoBlob);
                video.src = vid;
            })
            .catch(error => {
                console.log('Fetch error: ', error);
            });

        videoPromises.push(videoPromise);
    });

    Promise.all(videoPromises)
        .then(() => {
            allVideos.forEach((video) => {
                video.play();
            });
        })
        .catch(error => {
            console.log('Erreur lors du chargement des vidéos : ', error);
        });
}

document.addEventListener('DOMContentLoaded', () => {
    preloadVideos();
});

Modifié par Olivier C (25 May 2024 - 13:58)

Merci Olivier ,

cela a l'air de fonctionner, il faudra que je fasse des tests en ligne car forcement sur un serveur local c'est plutôt rapide, et les sources vidéos ne sont pas bien lourdes.

En fait c'est 2 fois la même vidéo dans une section plein écran, dont une avec un masque par dessus pour créer un effet. J'avais tout simplement au départ fait un clone de la première vidéo, mais l'autoplay ne fonctionnait pas sur Firefox sur la vidéo clonée, restriction du user agent, dommage car pas de pb sur webkit.

Je te tiens au jus
Merci encore

De rien. Remercie ChatGPT : j'ai copié/collé ta fonction, lui ai demandé de la transcrire avec l'API fetch(), accompagné de ta demande initiale ; c'est lui qui m'a suggéré la solution `Promise.all`, je n'y avais pas pensé d’emblée mais savais que c'était pertinent car je l'utilise par ailleurs. C'est incroyable ce qu'on peut faire avec cet outils avec de bonnes directives (prompts).

Je veux bien que tu nous fasses un retour à l'occasion, ça m'intéresse.
Modifié par Olivier C (25 May 2024 - 22:20)

Bien sûr, il est important de savoir coder, ne serait-ce que pour savoir où on va et donner des instructions précises aux IA. J'ai un niveau intermédiaire en Javascript et je sais coder à la mano, d'ailleurs je continue à coder beaucoup à la mano. Je code depuis 2009. Mais pour autant j'utilise les outils d'aujourd'hui pour m'assister, pour faire du code review, écrire des tests, demander des suggestions d'amélioration, écrire le JSDoc pour les fonctions, etc.

Avec les IA j'ai régulièrement des déconvenues ou des choses que je n'arrive pas à faire mais - la vache - je me dis que si on en est là à l'instant zéro qu'est-ce que ça va être dans 5 ou 10 ans ?

On est d'accord : aujourd'hui il ne viendrait à l'idée à personne de poinçonner des cartes perforées ou de coder en binaire, ou même en assembleur. Il faut s'adapter.

Il me semblait important de te le dire car je vois que tu te diriges dans le monde professionnel du web et tu ne pourras y échapper. Le dev' qui ne se mettra pas aux IA est destiné à péricliter.

Modifié par Olivier C (26 May 2024 - 20:49)

Salut Olivier

bon après plusieurs tests, la meilleure solution à mon sens est la suivante : charger les videos avec un preload auto en paramètre sur la balise video, et déclencher la lecture en js. En tout cas c'est celle qui m'a donné le meilleur résultat en terme de synchro. J'ai fais des tests en chargeant volontairement une dizaine de vidéos sur une page, même si cela n'a pas de sens, et j'avais pas mal de décalage sur les dernières vidéos avec la solution de départ que l'on avait évoqué.

<video loop playsinline muted disablePictureInPicture preload="auto">
    <source src="./ma_video.mp4" type="video/mp4">
</video>
<video loop playsinline muted disablePictureInPicture preload="auto">
    <source src="./ma_video.mp4" type="video/mp4">
</video>

document.addEventListener("DOMContentLoaded", () => {
    
    const videos = document.querySelectorAll('video');
    let videosReady = 0;

    videos.forEach(video => {
        video.oncanplaythrough = () => {
            videosReady++;
            if (videosReady === videos.length) {
                videos.forEach(v => v.play());
            }
        };
    });

});

Modifié par Pedrothelion (30 May 2024 - 00:23)

Merci pour ton retour.
Bonne continuation.