Advance video by dragging the click

Question

Advance video by dragging the click

Navigation

#1 by (0 votes)

0

I'm making an application on ElectronJS, the idea is to have a video paused, and that by dragging the mouse on it, this progress ... The same can be done by capturing the ondrag event, and increasing the currentTime of the video. The problem is that it does not advance until I release the drag, and what I need is for it to advance second by second as I drag the click. What would be the ideal way?

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

The event is executed, but the box is not updated until the click is dragged. I also try doing a play + pause inside the drag, but it does not work either ...

javascript nodejs electron

asked by Christian Barcelo 12.03.2018 в 15:52

source

1 answer

Error with Dompdf .. !!!! Generating pdf ...! The directory sites / default / files is not writable drupal 7

score 0 · Answer 1

What is missing for your code to work is to activate the draggable="true" property in your html tag of the video. In addition, if you do not show the progress you want to make when you do the function for it, you must activate the functions play () and pause () immediately one after the other for that you recharge the image of the video. It should be noted that although my answer is the function you want your code to do visually it is not very good and I would suggest using combinations of other events (click, mousemove, etc) to make it look better.

<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>