CODEWITHSUNDEEP
jqueryhtmleventsvideo
Chris
Chris

Reputation: 453

HTML5 video events

I have seen a HTML5 video player that has integrated chapters which sit in a scrollable list alongside the video.

When the video hits a certain point in the timeline the links(chapters) on the right hand side are highlighted.

Is there a video player that can achieve this?

Please see the example below

http://www.marksandspencer.com/Believe-in-Magic-Sparkle/b/1369516031

Upvotes: 0

Views: 284

Answers (1)

Jonas Grumann
Jonas Grumann

Reputation: 10786

I have created something similar a couple of months ago:

http://codepen.io/jonigiuro/pen/xnwJf

but instead of highlighting chapters I add texts over the video. This is achieved with the default html5 player and some javascript. The important part of the code is:

this.createCaption = function( current ) {
    //Highlight the new chapter
}

this.destroyCaption = function( current ) {
    //Unhighlight the last chapter
}

For the rest you can use the same script I find on the link above. I hope this is enough, if not, write back.

Upvotes: 1

Related Questions