Existe alguma forma para deixar um determinado trecho de um vídeo em loop até que o usuário clique em um botão usando HMTL5/javaScript?
Minha pergunta é sobre o loop, mas vou contextualizar a pedido dos colegas pois anteriormente eu havia sido sucinto até demais(rs): estou fazendo um vídeo interativo com quiz, como este: https://helloeko.com/tmw/101?autoplay=true
Enunciado: O apresentador do vídeo faz perguntas e o espectador escolhe "verdadeiro ou falso" clicando em um botão, como um quiz. A partir da resposta do espectador, o apresentador retorna feedback A ou B. Este feedback esta gravado no próprio vídeo, e estou usando
video.currentTime = a
evideo.currentTime = b
para "navegar" pela timiline.Vamos supor que o apresentador faça uma pergunta em 10s, (no vídeo ele faz a pergunta e fica esperando uma resposta) é neste momento em que o vídeo deve entrar em loop entre 10s e 15s para que de tempo do espectador tomar a sua decisão.
Todo o resto já consegui fazer, mas este bendito loop não estou conseguindo de jeito nenhum.
(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);
});
})();