HTML5/Avascript loop video snippet

Asked

Viewed 60 times

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 and video.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 I tried to contextualize better now. Thank you for the interest.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.