Embed a quiz in html5 video - breakpoints in a rich custom player

Question

Kurser has these interactive questions in the middle of his video lecture.

• How can I implement this myself
• or better yet, does this feature exist for public use somewhere?

In addition, I am trying to decide which video player / HTML5 platform will invest, and the key criteria will be multifunctional (so as not to reinvent the wheel / spend a lot of time implementing player functions), and also very customizable (for these custom tasks).

• those. which player must use to get the quiz
• but in the near future I will also need to add the speed function that Coursera has
• I need Closed Captions support.
• and would like to overlay slides from time to time
• plus all the expected functions of switching between different source resolutions (360p, 720p, etc.), it should work in browsers IE, Firefox, Chrome, Safari, Android and iOS, etc.

Candidates

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

• Not explored Flowplayer , would that be better for my purposes?

• Jwplayer is good for all standard functions and includes support for subtitles, but I really did not see any plugins, aesthetic skinning aside, deep customization is not really their focus / strength?

• Or videojs

• Or something else?

Answer 1

Flowplayer and Jwplayer are awesome players and you can do what you want, but in the free version you cannot remove your branding. I am trying to stick with open source projects that you don't care about licenses about.

I did something similar as you need with Mediaelejs . It supports everything you need at the moment, and they will support variable speed at some point in the future, as announced on their website. However, more than a year has passed since I began to look, therefore, probably, your "near future" to their "soon".

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

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

Answer 2

I used a widescreen player. I'm just starting to dive more into the new version of HTML5. Licensing for flowplayer is reasonable. It has a subtitle plugin, and the cue point function works fine. I also like that they have a version of Flash that works well for backup, and I still use it for streaming rtmp.

I built a video presenter with synchronized slides using the flash version, which I will change to have the HTML5 version. I use it to create Powerpoint presentation videos. Sometimes we have polls (live), so I also plan to use the option for polling.

You can take a look at what I built as an example here (it has some losses). An example of a synchronized presentation of video slides (I have no connection with Flowplayer. WebVideoDesk, branded on the linked page, is a service that I plan to launch someday.)