0

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 e video.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);

  });
})();

2
  • Como assim, poderia explicar melhor a sua ideia?
    – hugocsl
    24/05/2019 às 21:05
  • @hugocsl Tentei contextualizar melhor agora. Obrigado pelo interesse.
    – jeznunes
    27/05/2019 às 14:15

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .