Bonjour,
je suis nouveau sur le forum, et débutant en JS.
Je souhaite contrôler une vidéo avec Html5 + JS et je suis confronté à un blocage. Si vous avez une solution, je suis preneur et éternellement reconnaissant.

Ma problématique :
J'ai une vidéo de 13sec.
De 0 à 11 sec j'ai une séquence, et de 11 à 13 sec j'ai une deuxième séquence.

Je souhaite lire en boucle la séquence de 0 à 11sec, puis si je clique sur une zone spéciale de la vidéo le curseur poursuit jusqu'à 13sec et reboucle sur la première séquence.

J'ai réussi à faire la première boucle, le bouton d'action. Mais je n'arrive pas à lire la 2eme séquence.

Voici mon code :
Je créé ma zone de clic :
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
	#video-container {
 position: relative;
 }
 
 #interactive-zone {
 position: absolute;
 top: 50px;
 left: 50px;
 width: 100px;
 height: 100px;
 background-color: rgba(255, 0, 0, 0.5);
 cursor: url("img/mainmoy.png"), auto;
 }
 </style>

Je mets en place ma vidéo
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 <div id="video-container">
 
 <video id="myVideo" width="640" height="360" controls loop>
 
 <source id="videoSource" src="img/intro.mp4" type="video/mp4">
 Votre navigateur ne supporte pas la balise vidéo.
 </video>

Je place mon bouton de changement de video
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
 <button onclick="changerVideo()">Changer de vidéo</button>

Mon script pour changer de vidéo
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 <script>
 function changerVideo() {
 
 var video = document.getElementById('myVideo');
 var source = document.getElementById('videoSource');
 source.src = 'img/scene1.mp4'; 
 video.load();
 video.play();
	 LectureBoucle();
 
 }
 </script>
Mon script pour lire la première sequence
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
        function LectureBoucle() {
    var video = document.getElementById('myVideo');
 
    video.addEventListener('timeupdate', function() {
      // Vérifie si la vidéo a atteint la dixième seconde
      if (video.currentTime >= 11) {
        // On revient au début 
        video.currentTime = 0;
      }
                
    });
        }
  </script>

Une fonction pour lire à partir de la seconde 11
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
	<script>
function Miniclic() {
 
        var repaire = 11;
video.currentTime = repaire;
         
        video.play();
}
        </script>

Mon code si je clique sur une zone interactive et qui doit lancer la lecture à partir de la seconde 11

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var clickableZone = document.getElementById('interactive-zone');
    var video = document.getElementById('myVideo');
        clickableZone.addEventListener('click', function() {
      // Appel de la fonction si on clique sur la zone
 
Miniclic()
 
 
                if (video.currentTime >= 13) {
         LectureBoucle();
 };
    });
 
  </script>

Sauf qu'au lieu de lire, le curseur va à la seconde 11 puis reboucle sur la première séquence. La tête de lecture ne continue pas jusqu'à la seconde 13.

Auriez-vous une astuce ou peut-être une autre façon d'approcher le problème ?

Merci d'avance.