How to create interactive video

This article will give you the resources to add a bit of javascript that will display a pop up quizz questions throughout your video. This can be very useful especially if you are in the e-learning industry.

The vzaar API includes a getTime() function, which will allow you to query how much of a video has played. In its simplest form, this function can be used in conjunction with setInterval, to continuously return how much of a video has elapsed.

Then, when a preset point in the video is reached, we’re dis-playing an overlay, which contains either a quiz question or results.

The whole thing is built to be quite reusable. So, all the quiz questions, timings and answers are defined within a variable and then passed through the same function.

Defining quiz questions just requires the following…

var questions = [ new Question({ time: 8, title: 'A slow internet connection is like?', options: ['A narrow pipe', 'A wide pipe', 'A small box'], correct: 'A narrow pipe' }),
 new Question({ time: 20, title: 'People with low speed internet connections need?', options: ['Small video files', 'Large video files', 'It does not matter'], correct: 'Small video files' }),
 new Question({ time: 41, title: 'Dual encoding creates?', options: ['An SD encoding', 'A HD encoding', 'Both'], correct: 'Both' }) ];

Apart from that, the only other part of the JavaScript you’ll need to alter is the vzaar player’s ID. You’ll find that just above the questions variable. It essentially tells the API, which object to interact with.

<code>var vzp = new vzPlayer(“vzvd-1272265");

So, there you go use that code and you should be able to create a nice interactive experience for your students while they view your videos.

There's tons more you can do with the API. Check out our jQuery library for more examples.

Any questions? Always here to help contact us here or get me on live chat.

Still need help? Contact Us Contact Us