0

Estoy realizando una aplicacion sobre ElectronJS, la idea es tener un video en pausa, y que al arrastrar el mouse sobre el mismo, este avance... Lo mismo se puede hacer capturando el evento ondrag, y aumentando el currentTime del video. El problema es que ese no avanza hasta que no suelto el drag, y lo que yo necesito es que avance segundo a segundo a medida que vaya arrastrando el click. Cual seria la forma ideal?

var video = document.getElementById('video');
video.addEventListener('drag', function(event){
    video.currentTime += 1/12;  // A razon de 2 FPS
})

El evento se ejecuta, pero no se actualiza el cuadro hasta no dejar de arrastrar el click. Probe tambien haciendo un play + pause dentro del drag, pero tampoco funciona...

5

1 respuesta 1

1

Lo que falta para que funcione tu codigo es activar la propiedad draggable="true" en tu etiqueta html del video. Ademas de por si, no te mostrara el avance que deseas realizar cuando haces la funcion para ello deberás activar las funciones play() y pause() inmediatamente una después de otra para que te recargue la imagen del vídeo. Cabe resaltar que si bien mi respuesta es la función que buscas que haga tu código visualmente no es muy buena y te sugeriría usar combinaciones de otros eventos (click, mousemove,etc) para que se vea mejor.

<doctype html>
  <html>

  <head>
    <meta charset="UTF-8" />
  </head>

  <body>

    <div id="" >
      <video id='video' controls="controls" preload='none' width="600" draggable="true">
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
      </video>
    </div>
  </body>
  <script>
    var video = document.getElementById('video');
    var currentTime = 0.05;
    
    // pongo play y pause para que actualize por la imagen del video sin eso no lo hace
    video.play();
    video.pause();

    // agrego el listener de la funcion cuando se haga drag
    video.addEventListener('drag', Myfunction);
    
    // function que actualiza el tiempo en cual esta reproduciendo
    function Myfunction(event) {
      this.currentTime += currentTime;
    }
    
  </script>

  </html>

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.