Contr�le d'une vid�o avec html5 et javascript
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:
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:
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:
<button onclick="changerVideo()">Changer de vidéo</button>
Mon script pour changer de vid�o
Code:
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:
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:
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:
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.
