embed quiz into html5 video - cue points in a rich customizable player

Question

Coursera has these interactive questions in the middle of their video lecture

• how could I go about implementing this myself,
• or better yet, does this feature exist for public use somewhere?

Furthermore, I'm trying to decide which HTML5 video player / platform to invest in and the key criteria would be feature-rich (so as to not reinvent the wheel / spend lots of time implementing video player features) as well as highly customizable (for those custom needs).

• I.e. which player should I use to get the quiz up,
• but in the near future I would also need to add the speed feature that Coursera has
• I need Closed Captions support
• and would like to overlay slides every now and then
• plus all the expected features of switching between different source resolutions (360p, 720p etc), it should work in IE, Firefox, Chrome, Safari, Android and iOS native browsers etc

Candidates

• In terms of customizability and feature-set, SublimeVideo seems to come on top, but I don't know when they will support subtitles.

• Haven't researched Flowplayer much, would that be better for my purposes?

• Jwplayer is good for all the standard features, and includes subtitle support, but I haven't really seen any plug-ins, aesthetic skinning aside, deep customization does not really seem to be their focus / strength?

• Or videojs

• Or something else yet ?

Answer 1

Flowplayer and Jwplayer are amazing players and you could do what you want, but in the free version you can't remove their branding. I try to stick to opensource projects you you don't worry about licenses.

I've done something similar as you need with Mediaelementjs. It supports all you need at the moment, and they will support the variable speed at some point on the future as announced in their website. However it has been like that for more than a year now since I started watching, so probably your "near future" is before their "coming soon".

I think your best free option will be Videojs. They also support all you need. For the variable speed there is this plugin.

Basically you set up a listener in the timeupdate event, and when it reaches the point that you need, you attach the quiz html to overlay the video area.