Skip to certain time in HTML5 video via a button with jQuery

Question

I am trying to jump to a point in a video when a button is clicked.

So I have my buttons which look like this:

   <!-- Chapter 1 = Skip to 20s -->
  <button id="ch1">Chapter 1</button>
   <!-- Chapter 2 = Skip to 100s -->
  <button id="ch2">Chapter 2</button>

Not sure what todo for the JS but this is what I have done so far:

  var vid = $("#video")[0];
  $("#ch1").click(skipTime(100));

  function skipTime(time) {
     vid.play();
     vid.pause();
     vid.currentTime = time;
     vid.play();
  };

Doesn't work after trying heaps of different combinations, have looked around and can't find anything that works. So I'm stumped, any suggestions of how to do this is appreciated.

Answer 1

Change this line:

$("#ch1").click(skipTime(100));

To this, (also, you should declare skipTime first, and only then assign it):

$("#ch1").click(function(){
    skipTime(100);
});

When you use skipTime(100) it runs your function and return some value or undefined if nothing was returned from skipTime... and because that, the click-handler does not have a function to run on every click.

When you wrap it with function(){ ... } the click-handler will run the function on every click.

Hope it helps.