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
        })