Synchroniser une vidéo avec le défilement du navigateur

Dans ce tutoriel nous allons voir comment synchroniser une vidéo avec le défilement de la page dans le navigateur.

Le HTML

Pour commencer, nous allons créer la structure HTML de la page qui contiendra autant de conteneurs que d'étapes souhaitées dans la vidéo.

Dans notre exemple, nous avons 5 conteneurs qui correspondent aux 5 étapes de la vidéo

<section class="container">
    <div class="content">
        <h1>Commencez à scroller</h1>
    </div>
</section>
<section class="container">
    <div class="content">
        <h1>Boum</h1>
    </div>
</section>
<section class="container">
    <div class="content">
        <h1>Feu</h1>
    </div>
</section>
<section class="container">
    <div class="content">
        <h1>Fumée</h1>
    </div>
</section>
<section class="container">
    <div class="content">
        <h1>Fin</h1>
    </div>
</section>

Nous insérons ensuite notre vidéo

<video id="v0" tabindex="0">
    <source type="video/mp4" src="videos/Intro_Tuto.mp4"></source>
</video>

Le CSS

Dans le CSS, nous allons faire quelques mises en forme permettant de fixer la vidéo sur le fond d'écran et les différentes sections aux dimensions correspondant à nos étapes, celà demande quelques calculs

body {
    font-family: Arial;
    padding: 3rem;
}

video {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
}

.conteneur{
    z-index: 1;
    position: relative;
}

.contenu {
    position: sticky;
    top: 30%;
}

h1 {
    background-color: white;
    display: inline-block;
    padding: 10px;
    margin: 0;
}

/*
Liste des timecodes :
Boum : 00:21 7.78%
Feu : 01:02 11.85%
Fumée : 02:15 27.78%
Fin : 05:11 59.63%
Total : 09:00 100%
*/
section:nth-of-type(1) {
    height: 1200px;
}
section:nth-of-type(2) {
    height: 840px;
}
section:nth-of-type(3) {
    height: 1280px;
}
section:nth-of-type(4) {
    height: 3000px;
}
section:nth-of-type(5) {
    height: 4480px;
}

Le javascript

Après avoir fait le CSS, nous allons gérer la vidéo en Javascript.

Nous allons utiliser requestAnimationFrame pour gérer le défilement de la page et faire avancer la vidéo.

let position = 0;
const vitesse = 1200;
const video = document.querySelector("video");

window.requestAnimationFrame(avanceVideo);

function avanceVideo() {
    position = window.pageYOffset / vitesse;
    if(video.readyState >= 3){
        video.currentTime = position;
    }
    window.requestAnimationFrame(avanceVideo);
}

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.