I want to learn about

HTML5 video tools improve elearning interactivity

by Kate Middleton - March 14, 2018

Html5 video is used in most elearning and digital content production. The big advantage of html5 video is that it is a universal standard for different devices and screen sizes. But just because it is easier to use video, doesn't mean we are making best use of it for learning. This blog is about how to make online video more engaging using the latest MP4 formats and html5 video advances.

HTML5 elearning - making the most of online video

Much debate has surrounded the use of explainer animations and video in eLearning here at Camp Logicearth. ‘Micro-learning! Better visuals! Modernisation!’ cries the pro side of the office, ‘Interactivity? Learner engagement? Pull over Push?’ from the Con corner.

The online world has been shifting towards video for a while. We are definitely always looking for ways to drag elearning from its traditional perception of an archaic, 1990s click-next-a-thon. Should we chase every trend, or are there formats that are simply not destined for our little niche?

the science behind elearning design free ebook

Our intelligent learning platformPercipio makes good use of interactive video

Animations and videos are attractive - they can deliver bite-size pieces of information in a memorable way. They are also adaptive; they can be viewed on any device and can even be played in a corner of a screen while you get on with something else. But is that what we want from learning – something that you don’t need to engage with, that can be ignored once you click the Play button?

Interactive videos can be the step between the speedy, aesthetic information-delivery device of video and the learner engagement that drives thinking power and makes that information sticky. Learners can make their own stories through interactive branching scenarios, or test their understanding with occasional interruptions to straight narrative pieces.

Examples of how we have used HMTL5 video interactions

If you want a demo of any of these examples, please do get in touch

Example 1: adding a branching point to help practise decision-making skills.
The video plays, stops at a key decision point - shown here, then takes a different path to show the consequences of the decision. 

Example 2: using special effects to make a bigger impact on the overall message. The video involves two characters.
A 'voice' in the main character's head appears to give advice at crucial stages in the learning process.

Reviewing 5 HTML5 video tools

There are many tools available to create these short, interactive learning pieces. Here are a few that have impressed us:

360 videos made easy – Wirewax

See Wirewax examples

With this tool, you can create different types of interactive videos. Hotspots allow learners to click an icon at certain points, taking them to an information screen or another video clip; branching videos let learners choose which path they want to go down; 360 videos allow a ‘look around’ the scene; and multi-stream videos enable switching between different videos or camera angles.

Online quiz through interactive video - Kaltura

See Kaltura examples

With Kaltura, you can add interactivity through interactive chapters, slides and views. This is helpful for a long video with a lot of sections, as you can break it down into chunks that learners can search through with a menu. You can also add quizzes at specific points of the video, to test learners on what they have been watching. Social sharing tools can also be embedded within the video player, so that learners can share the video to their social networks if they wish.

Run live polls and get immediate feedback from video - ClickView

See ClickView examples

ClickView is a tool that creates videos specifically for learning. It includes interactive questions too, but what is most interesting is the ability to collate the responses of learners. For example, you could show learners a demonstration and then ask them to describe it back to you in as few words as possible. This could give you an immediate snapshot of how well your learners are understanding the content. Or, it could be used as a tool for gauging the need for further training; learners could be asked how useful they found the information and whether they would like to know more – or how it can be better fitted to their role in your organisation.


New call-to-action

Language translator and video editing - HiHaho

See Hihaho examples

Hihaho is perfect if you have a video already that you don’t want to tamper with, and just need to add some simple interactivity. The interactions that can be added include questions, menus, scrolling text and hotspots. The tool has multi-language capabilities and, reassuringly, their website boasts support of SCORM and xAPI (Tincan) ‘both digitally and emotionally’.

Best video editor for mobile-ready videos - Koantic

View Koantic examples

Koantic has all the built in interactions you need to make responsive and mobile-ready videos, along with some structural help such as branching tools and a task management function. With a content library and WSIWYG editor – this is the perfect tool for creative minds that are also partial to a good bit of organisational structure.

the science behind elearning design free ebook

Video production services

We offer video production services, from concept planning to scripting, actor selection, filming and post production. Check out our Content development services for interactive video we make best use of the latest html5 video effects.


Our new GDPR course also uses the latest in html5 video effects - you can try it to Win it!


Related posts

This month, two of our learning experience designers (LxDs), Niamh and Anna, chat about our new suite of compliance resources, Comply… Suffice to..

Talking LxDs
Read Article

Last year we endeavoured to have much more meaningful conversations with a number of our content development clients about the move away from SCORM..

Helen Cassidy
Read Article

Our Learning Experience Designers (aka the artist formerly known as 'Instructional Designers') have been instant messaging again. This time it’s..

Talking LxDs
Read Article

Most workplace learning happens on the job rather than through formal courses. Knowing this, our expert Learning Experience Designers tap into the..

Talking LxDs
Read Article