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

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

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)