0

tengo un video que que le quiero controlar el avance cada que se da click en uno de los textos.

<div class="video-content2">
    <video id="videoSlider" autoplay class="video" controlslist="nodownload" loop="">
      <source src="video_web_hibridos_1800x340.mp4" type="video/mp4">
    </video>
</div>

<div class="controls">
    <div class="controls-1">
        <p onclick="setCurTime()">Parte 1</p>
    </div>
    <div class="controls-2">
        <p>Parte 2</p>
    </div>
    <div class="controls-3">
        <p>Parte 3</p>
    </div>
</div>
<script>
    var vid = document.getElementById("videoSlider");

    function setCurTime() {
        var time = vid.currentTime = 5;
        if (time == 5) {
            vid.pause();
            console.log("display block");
        }
    }
</script>

aca me funciona de tal forma que si quiero que se ponga en el segundo 5 se avanza, pero lo quiero lograr es que avance hasta el segundo 5 y se detenga, ya que avanza hasta el segundo 5 de golpe.

1 respuesta 1

1

Yo tengo un código algo raro que cumple esa función. Raro porque un tiempo necesitaba ésta función y conseguí de algún sitio e hice copia pega, sin estudiarlo. Pero ahora te comparto y te servirá.

Nota. Si se agrega el atributo controls y si se hace play mediante el control, el evento no funciona. Solamente funciona con la función onclick del botón.

function setCurTime() { // Recibe la función click

// Variables: video y temporizador
var video = document.getElementById("video"), temporizador;

video.addEventListener("play", function() {

    // Definir dentro de temporizador
    temporizador = setInterval(function() {

        // El tiempo de pause() y parar temporizador
        if(parseInt(video.currentTime) == 5) {
            clearInterval(temporizador);
            video.pause();
        }

    });

}, false);

// Al hace click, en setCurTime() el vídeo corre
video.play();
};
<video id="video" autoplay style="background-color:#000;width:100%;display:block">
            <source src="">
        </video>
        <br><br>
        <button onclick="setCurTime()">Play demo</button>

1
  • Exactamente como lo necesitaba, muchas gracias. Commented el 5 abr. 2022 a las 22:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.