Close this search box.

Developing Online Interactive Videos

Developing Online Interactive Videos

If a picture is worth a thousand words, then video multiplies that ability exponentially. Video with interactivity enriches the user experience even further. You now have the capability of making your videos more engaging by designing in layers of interactivity that will benefit both you and your viewers. Interactive video supercharges your site with better lead nurturing, e-learning and video branding.

It is known that most viewers of online video rarely view entire clips. Providing methods for exploring the videos non-sequentially or providing responsive feedback by direct interaction with the video screen makes it more engaging to the viewer and keeps them on your site for longer periods. The ability to be able to return to a video training session at a later time and be able to continue from where you left off, or have responsive feedback to user input is invaluable to the user. On the flip side, the analytical information that can be derived from the user input, helps the marketer develop sales strategies or helps the producer with customized training path for their students.

At Direct Images Interactive, we offer services that can make your videos more engaging. Using the right technology when creating interactive videos is key. One of the most innovative developers of interactive video technology is one of our partners, HapYak. Having a combination of interactive and analytic tools which can apply to almost any existing public or privately hosted video on the web is empowering. At last count there over 18 players supported, such as YouTube, Vimeo, JW Player, Vidcaster, etc. For some players, direct integration can be set up where projects are created automatically for example, from Brightcove or Wistia accounts.

Previously, presenting online interactivity for the web required use of plugins such as Flash, but with the demise of that platform came the need for a new set of web development tools to offer robust interactive media capabilities in the HTML5 environment.

The HapYak interactive tool
The HapYak interactive toolbar for creating Interactions. Overlay on the left is a dropdown Chapter Menu, and the name bar on the right is is an example of the text annotation

One type of Interaction is a Chaptering capability which allows the designer to divide the video quickly with accessible jumps to different areas of the presentation. Chapters can be added at different points of a video for user navigation. In addition, different chapters are indicated visually below the video screen during playback as small dots. With built in analytics, Chapters can provide feedback to let you know what areas of the video the user’s view most.

Links are another Interaction which can hyperlink to anything with a URL, such as another website or a PDF for download. Three types of links that can be used are: text, image, and hotspots. Text links to other parts of the video or other web pages. Hotspots are user defined areas which can make any part of the video act as a virtual button, or display graphics, text, questions, etc.


Another type of interaction that can be set up is Quizzing, which provides questioning and feedback capabilities. User quiz results can be placed into data bases for review and tracking.

Two examples of quizzing are: Multiple Choice and Free Response Questions. These can easily be customized to the developers needs, and all data can be ported out as needed.


Also included are pass/fail options which are programmed in.

Setting up the interactivity for a project is pretty straight forward. The tools provided are simple and well thought out. If you are going to incorporate the quiz feature, it would be a good idea to study its capabilities and limitations in HapYak, and then design around them. If questions and responses are well thought out, the quiz feature can be a robust and powerful tool.


The analytics features built into the HapYak system are also very useful. You can track, incorporate and analyze user data for use in CRM (Customer Relationship Management), CMS (Content Management Systems), LMS (Learning Management Systems) and other analytic applications.

HapYak has numerous API (Application Programming Interface) functions included to help the developer design a custom interface for your site and provide you with the feedback and data that you need.

There doesn’t seem to be many drawbacks to using HapYak. There were some issues initially with screen scale and refresh issues on some pads with some players, but the company continues to address issues and periodically updates their API’s and engine.

If you are in need of an interactive video presentation, Direct Images Interactive and HapYak are worth a look.

To see examples of interactive video and to read more about how it can help you, explore here or watch a replay of our live streaming event about interactive video by clicking the banner below.

Subscribe to our BLOG

Stay in touch & learn how to attract customers, become a thought leader, create effective marketing campaigns, & more.

Related Posts

Direct Images Interactive is a video marketing agency specializing in high-impact video production and online graphic design. We are centrally located between Oakland, San Francisco and San Jose.

We make you look good.