CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
user3192978
user3192978

Reputation: 95

Add chapter links to a video

I am fairly new to JavaScript and jQuery, but I have a video(video-tag) in my webpage and a bunch of links on the left side. Now the links should act as chapters.

So if I click on a chapter, the video should jump to a specific time in the video.

Is there a good solution which solves my problem?

Thanks in advance

Upvotes: 1

Views: 2080

Answers (1)

James Hibbard
James Hibbard

Reputation: 17725

You can do this by using the HTML 5 video api and its currentTime property. With this you can jump to a given time within a video (in seconds).

Here is the documentation.

You would use it like this:

var myvideo = document.getElementById('myvideo'),
    chpt1 = document.getElementById('chpt1');

chpt1.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 7; // or whatever
    myvideo.play();
}, false);

Here's a fiddle demonstrating this, taken from the following thread: html5 video button that takes video to specific time

Upvotes: 1

Related Questions