0
Is there any way to loop a particular snippet of a video until the user clicks a button using HMTL5/Avascript?
My question is about the loop, but I will contextualize at the request of colleagues because previously I had been succinct until too(rs): I’m making an interactive video with quiz, like this: https://helloeko.com/tmw/101?autoplay=true
Statement: The presenter of the video asks questions and the viewer choose "true or false" by clicking a button, as a quiz. A from the viewer’s response, the presenter returns feedback A or B. This feedback is recorded in the video itself, and I am using
video.currentTime = a
andvideo.currentTime = b
to "navigate" through timiline.Let’s assume that the presenter asks a question in 10s, (in the video he asks the question and is waiting for an answer) is at this time when the video must loop between 10 and 15 s so that of time of the spectator make his decision.
All the rest I’ve been able to do, but this damn loop I’m not getting at all.
(function() {
//as variaveis abaixo determinam a "janela de pausa" do video, ou seja o video deve pausar entre x e x.2 seg.
var video = document.getElementById("primeiroVideo");
var tempoVideo = document.getElementById("mostrador_tempo");
var isEnded = false;
video.addEventListener("ended", function() {
isEnded = true; //tempoVideo.textContent = "Parabéns! Você assistiu o vídeo até o fim.";
}, true);
video.addEventListener("timeupdate", function() {
if (!isEnded) {
tempoVideo.textContent = parseTime(this.currentTime) + " / " + parseTime(this.duration);// captura os segundos e o tempo de duracao do video
//var segundosVideo = parseTime(this.currentTime);// captura os segundos do video
}
}, true);
video.addEventListener("timeupdate", function() {
var segundosVideo = (this.currentTime);// captura os segundos do video
var pararEm = 10; // coloque aqui o tempo em segundos que deseja que apareça o quiz
var timeSome = 15;
//bloco para pega o resto do tempo
var resto = parseInt(/^[0-9]*?(?:[\.,])([0-9]*?)$/g.exec(segundosVideo.toString())[1]);//pega a parte decimal
var concatVars = pararEm + "." + resto; // concatena
var parouString = concatVars.toString();// transforma em string as vars concatenadas
var parouNow = parseFloat(parouString);// transforma a string em numero flutuante
// fim do bloco para pega o resto do tempo
if(segundosVideo >= pararEm && segundosVideo <= timeSome){
document.getElementById("feedback_1").style ="visibility: visible";
document.getElementById("feedback_2").style ="visibility: visible";
document.getElementById("feedback_3").style ="visibility: visible";
} else {
document.getElementById("feedback_1").style ="visibility: hidden";
document.getElementById("feedback_2").style ="visibility: hidden";
document.getElementById("feedback_3").style ="visibility: hidden";
}
var luperXvezes = 5;
function loopa(){//looping do video
for (i =0 ; i < luperXvezes ; i++){
if(segundosVideo >= pararEm && segundosVideo <= timeSome){
video.currentTime = pararEm;
}
}
}
loopa();
console.log(luperXvezes);
});
})();
What do you mean, you could explain your idea better?
– hugocsl
@hugocsl I tried to contextualize better now. Thank you for the interest.
– jeznunes