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.
