CODEWITHSUNDEEP
javascriptjqueryhtmlbuttonhtml5-video
sparcut
sparcut

Reputation: 825

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

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.

Upvotes: 4

Views: 5852

Answers (1)

user4227915
user4227915

Reputation:

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.

Upvotes: 2

Related Questions