Discussion :

[guimmick]

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.

[mathieu]

sans avoir testé, j'ai l'impression que le bouton qui fait passer à 13 s déclenche l'évènement "timeupdate" et donc le code de cet évènement fait le retour à 0.
essayez de rajouter une variable "lecture_2e_partie vrai/faux". vous pourrez alors tester cette variable pour savoir s'il faut faire le retour à 0.

je vous conseille de débuguer votre code en affichant le contenu des variables, par exemple avec console.log().

[ASCIIDEFOND]

Salut guimmick,

Et comme ça ?
Tu adaptes le code pour la "zone spéciale".

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en-us">
 
<head>
    <meta charset="utf-8" />
    <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;
        }
 
        button {
            width: 150px;
            height: 35px;
            position: relative;
            display: block;
            color: black;
            cursor: pointer;
        }
 
        button.hidden {
            pointer-events: none;
            opacity: 0.4;
        }
    </style>
</head>
 
<body>
    <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>
 
        <button id="changer-video">Changer de vidéo</button>
        <button class="hidden" id="zero-onze">Boucle de 0 à 11</button>
        <button class="hidden" id="zero-treize">Boucle de 0 à 13</button>
    </div>
    <script>
        var boutons = document.querySelectorAll('button'),
            container = document.getElementById('video-container'),
            source = document.getElementById('videoSource'),
            video = document.getElementById('myVideo'),
            maxCurrentTime = 13
 
        container.onclick = e => {
            if (e.target.matches('#changer-video')) {
                source.src = 'img/scene1.mp4'
                video.load()
                video.currentTime = 0
                video.play()
                for (let boutonSelect of boutons) {
                    boutonSelect.style.cssText = `pointer-events: inherit; opacity: 1;`
                }
                document.getElementById('zero-treize').style.color = 'red'
            }
 
            if (e.target.matches('#zero-onze')) {
                video.currentTime = 0
                maxCurrentTime = 11
                document.getElementById('zero-treize').style.color = 'black'
                e.target.style.color = 'red'
            }
 
            if (e.target.matches('#zero-treize')) {
                video.currentTime = 0
                maxCurrentTime = 13
                document.getElementById('zero-onze').style.color = `black`
                e.target.style.color = 'red'
            }
        }
 
        video.addEventListener('timeupdate', function () {
            let position = parseInt(video.currentTime)
            if (position == maxCurrentTime) video.currentTime = 0
        })
    </script>
</body>
 
</html>

[guimmick]

Merci ASCIIDEFOND ta méthode n'est pas simple mais très robuste et fonctionne bien. JE vais devoir l'adapter à l'ensemble de mon projet. C'est une autre façon de voir le problème et ça m'évite de séparer les actions.

@Mathieu je vais tester les log également pour débuguer.

Merci encore ça m'a été très utile.

[ASCIIDEFOND]

...ta méthode n'est pas simple ...

Il ne faut pas tenir compte de la gestion des boutons et des styles CSS (ce n'est que de l'habillage).
Ce qui est important pour ce que tu cherches à faire c'est la variable maxCurrentTime et video.addEventListener.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        video.addEventListener('timeupdate', function () {
            let position = parseInt(video.currentTime)
            if (position == maxCurrentTime) video.currentTime = 0
        })