Enhance Online Video with H5P’s Interactive Video tool

image source: John Allan

In Six Tools To Enhance Video Learning,   I posted about using online video in the classroom more efficiently and possibly creatively.  Since then a new education technology development tool, H5P, has emerged.  I have been working on a variety of projects with H5P and feel that it is important for educational developers to consider adopting it as a means for enhancing online video learning events.

HTML 5 Packager, better known as H5P, is a free tool that allows you to create custom learning objects with online video.  H5P’s Interactive Video feature allows developers to overlay resources and interactive features over a video itself.  This optimizes the learners’ video viewing area.  Until now, interactivity with the video occurred under the video, on the play back bar, or as a fly out menu to the left or the right of the video.  Overlain interactivity on a video makes the end-user’s experience intuitive. Items such as comments, true/false questions or links to further information can be strategically positioned over the video and timed to focus attention to specific parts of the video screen.

Items positioned over the online video can be represented as a clickable button or in poster mode.  The button appears as set by the developer.  Learners then click on the button to maximize the hidden element.  In poster mode, questions and visuals appear in a maximized format automatically.

H5P interactive videos are a marked improvement for students using mobile devices.  Since the interactivity is positioned on top of the video, screen utilization is optimized.  Also, the use of HTML 5 supports responsive display. In responsive design, all screen elements are segmented into columns.  The browser and device negotiate a display based on available screen size and the content leading to learning objects that display satisfactorily on all screens.

A mash up of features for H5P interactive video

  • Crossroads allows intra-video navigation based on the learners’ choice. A good example of this is an opening menu.
  • Drag and drop image questions support dragging text and images into hotspots to test comprehension.
  • Drag and drop text questions are a quick means of checking in if learners have paid attention to specific parts of the video.
  • Fill-in the blank questions test student knowledge and spelling
  • Interactive images provide a visual link to a different time in the video or another web page.
  • Interactive text provides a text link to a different time in the video or another web page.
  • Label comments allow for text comments on the video to further inform the learner.
  • Links seamlessly allow learners efficient access to additional online resources related to the video.
  • Mark the Words checks knowledge by directing the learners to highlight text presented over the video. This may allow learners to identify specific parts of speech or relevant vocabulary
  • Multiple-choice questions are another means of checking comprehension with the additional options of layering another video or an image on top of the video. (Sounds too crazy but it is true!)
  • Navigation Hotspots are hotspots that may be carefully placed over different parts of the screen to allow learners to navigate to other parts of the video or to other websites
  • Open-ended questions provide students a means to provide additional information in their answers. These can be assessed through a class using a learning management linked to the H5P interactive video.
  • Questionnaires can be embedded in a video activity to solicit learners’ viewpoints.
  • Single-choice questions can quickly assess comprehension or recall of information offered in the video through one or more choose-the-best-option questions.
  • Statements prompt learners to choose the most appropriate statement during video playback.
  • Summary questions are usually positioned at the end of a section or video as a main concept check in at the end of the video.
  • Tables can be made and displayed over the video itself.
  • True or False questions are a standard quizzing question type for checking comprehension

Four easy steps to create H5P interactive video learning objects

  1. Uploading or linking to an online video (you may upload a small video to the H5P server)
  2. Adding Interactions (the ones mentioned above)
  3. Setting a summary task
  4. Publish and share the H5P learning object

I created one recently as a short introduction to a unit on the environment.  Check it out.  https://h5p.org/node/392489

Interested in more H5P?

With more than thirty different H5P learning object types available to develop your own learning objects, it will take quite some time to become familiar with all of them.  Most likely, you will identify a few that suit your requirements and experiment with them.

Once you start exploring it feels like a Swiss Army Knife.  The H5P community generously provides exemplars and detailed “How to” guides for beginners covering each tool.  If you are a self-starter, you will find learning H5P to be a relatively enjoyable experience.  In reality, everything that is created takes planning, energy and time.  The tool does not make the learning object, you do.  I find that H5P allows me to focus more on the creativity since H5P’s workflow and contemporary publishing take care of some of the mechanical details.

H5P’s responsive arrangement connects students with the content without fumbling over device settings. If you want to try this new tool as a learning object developer, start with the  H5P Quickstart guide and then continue to the H5P Interactive Video Quickstart Guide.  For a more interactive video example see https://h5p.org/interactive-video  and a detailed tutorial on the H5P server can be found at https://h5p.org/tutorial-interactive-video.

If you have used H5P as a developer, instructor or learner feel free to share your comments below.  


H5P Quickstart guide

H5P Interactive Video Quickstart Guide.

H5P Interactive Video

H5P Tutorial Interactive Video.

Hi—I'm John Allan. I am an educator who works in the technology enhanced language learning field. I create online learning opportunities and mentor instructors on the Avenue project. I have experience teaching ESL and EFL in Canada and the Middle East. I hold an MSC in Computer Assisted Language learning, a M.Ed. in Distance Education, TESL B. Ed., a B.Ed. (OCT), and a variety of TESL relevant certifications from TESL Canada, TESL Ontario and the Ontario Ministry of Education. For more articles, learning objects, projects and blog links see https://www.linkedin.com/in/johnharoldallan


3 thoughts on “Enhance Online Video with H5P’s Interactive Video tool”

    1. John, thanks, as always, for your sharing, I created an H5P a/c some time ago but have been uberbusy with creating materials and teaching with Z OOM and Google Classroom…just gotten better adept at GOOGLE Forms!! As with all technology it is not the technology itself that is crucial to teaching effectively but the purpose of using the tech, the content, and the ways we put the technology to use. Plus the reasons why one form is chosen over another. Looking forward to exploring H5P creation during summer break.

  1. Claudie,

    I am sure that H5P will enhance your instruction. Also, be patient with ti as all of the tools are not uniform int terms of development.

    enjoy the summer.


Leave a Reply

Your email address will not be published. Required fields are marked *