The H5P Roadshow Continues: It’s Alive! Creating Interactive Learning Experiences with H5P

The H5P Roadshow Continues: It’s Alive! Creating Interactive Learning Experiences with H5P

May 13, 2021 Off By JR

I couldn’t resist the blooper. Kitten was meowing and scratching at the door but couldn’t quite work it out to have her present in the actual video. Next time. Ahhh conferencing from home.

2020 was the year of postponed and cancelled conferences, yet oddly, after a couple gap years for me there thankfully were some opportunities that popped up. There was one conference presentation that was cancelled for me though. The CAUCE conference was scheduled to be in Calgary last year, and I had an enlightening talk accepted under the title It’s Alive! Interactive Online Content for Engagement and Feedback. The conference didn’t pivot last year, and was cancelled outright. This year, the conference is being held online and placed on the online platform Whova (new one to me). Those who answered the call for papers, presentations, workshops etc. had a few options for formats which I thought was refreshing:

  • Synchronous session, with live Q&A
  • Pre-recorded session, with live Q&A
  • Pre-recorded session, with asynchronous Q&A (over a week or 10 days)

I’m a sucker for alternative formats so I went with pre-recorded and async Q&A. I’ve been working on what I’ve nicknamed JR’s H5P roadshow through 2020/2021, promoting the use of the tool in different forums large and small. I’ve been grateful for the opportunities to not only share my work with educators across this country (and in one case the world), but promote practices that I feel can empower educators and support student learning beyond the context I’m in.

It’s Alive! Creating Interactive Learning Experiences with H5P

Please feel free to check out the video presentation I created for this particular conference.

Behind the Scenes

When I first started using H5P, I was in an Educational Developer role at UAlberta. One instructor, who was working on a first year Chinese language course, asked me about tools like Zaption. She had used the tool to make interactive videos at one time, but I think another edtech giant, probably rhymes with “hoard”, bought it up and crushed it. Around that time I had stumbled upon H5P and I brought some suggestions to her. We ended up using some activities that have stuck with me ever since, the dialog cards (seriously I have real enthusiasm for this type). We also added some interactive to videos, all done on H5P.org at the time. After I left that position, I did get an email from her indicating she’d secured funding to apply blended learning strategies to her course and that our work together formed the foundation of her application. I was so happy about that. If you work with IDs, ed tech folks, or Ed Devs, please share your stories with them. It means a lot to us to see you succeed.

Anyhoo, I’ve pretty much only used the interactive video in 1 or 2 other courses. One reason is the limitation of video streaming services that the content type works with. Another is that there’s not always a lot of buy-in from instructors for interactive video as there is for say Questions Sets. I had considered just doing a show and tell when I proposed this session, but then I figured, it’s an online conference, lets just do something fun and different, so I pitched that instead of a video recording, what would make my presentation unique/interesting is that I would provide it using the very tool I was to talk about. Past JR, sometimes you’re smart, other times you’re a real jerk. This time, it’s a mix.

I wrote up a bit of a script and organized the sections of the presentation in a document. Then I downloaded the PPT template provided by the conference organizers for the bits of the presentation that would be more theory or argument rather than demonstration. Using Panopto, I captured the screen and audio for the PPT sections, as well as what I had planned out for demonstrations. I could have used a number of other tools for that, but since the university I work at adopted Panopto I’ve found the combination of one button recording and a simplified editor hard to get away from. That left me with about 10 video clips, give or take, to work with. I edited out major fumbles and downloaded the MP4 files for each video. Note to self, leave more dead air around your talking next time. What a novice mistake.

Next, I wanted to get a short recording of me to introduce the video. I hate the talking-head-in-picture formats so I limited my appearance to just an intro at the start. I ended up downloading drivers to use my Canon T3i as a webcam, as my Mac Mini does not have a web cam. I have to say I was impressed with how it worked. I used a Blue Snowball microphone to capture the audio, and while the sound in our home office isn’t great, I think it’s actually a touch better than my office at work. Less reverb. I used Zoom to record the me talking portion. Originally I had hoped to use the fake background feature, but with the lighting and the camera it didn’t work out. Next time I’ll probably just use Quicktime or something else for that portion.

After exporting the me talking video, the PPT slides as images, and the Panopto videos, I brought everything into Premiere Pro. It’s what I have been using for most of my video editing for the last 4 years. As long as I have easy access to an Adobe license I probably won’t change (although I’m moving away from other portions of the creative suite and adopting the Affinity suite to take up the work of photoshop, illustrator, and indesign). I chopped up the video pieces, and realized that I needed one more section. So I got out the microphone again, loaded up QuickTime and grabbed some audio. Because there was no screen capture, I grabbed a feature image to a blog post I had written and gave it a little bit of motion using keyframes in Premiere.

I added a splash of music from CC Mixter (I’ve been grabbing most openly licensed music I use for video work from there lately) and added it to the beginning and end of the video. From here I exported it, uploaded to YouTube and now it was ready for prime time.

Years ago, I recalled that Terry Greene had a presentation (maybe keynote?) where he made a choose your own adventure style slide deck. I liked this so much I thought I’d steal Terry’s idea, but apply it to H5P. In this case I began by adding bookmarks throughout the video at the big ideas sections, or rather, sections where I could answer a question such as: Which H5P is right for you, What is H5P, Getting Started, or bringing back a bit of my PressEd presentation with Talk is Cheap JR, Show Us Examples! I’ve used the bookmarks tool in other interactive videos that I use for study guides and find them really handy for longer videos.

You always see YouTubers pointing up at the air in the videos, pointing out links for you to check out, so I adopted that approach in the introduction to guide people here (hopefully) or to my Twitter (you’ve been warned). I had also recorded a bit of a tutorial, which introduces the audience to the H5P interactive video player interface. I did NOT restrict viewer’s ability to just jump around on the timeline, but I thought it might be nice to add a skip this tutorial button just as an idea demonstration.

To execute on the choose your own adventure style of the presentation, I used the crossroads tool which allows you to put in prompts to direct your viewer to specific parts of the video. This could have been done with any of the other content types as well, but I like the way crossroads presents on the screen. For this I did force pause the video, and I found that the landing point and the crossroads interfered with eachother a bit because like a novice, I didn’t leave enough dead air between sections (see earlier note scolding myself above).

I linked to blog posts throughout, included one embedded H5P activity (drag and drop) for demonstration purposes, and then linked out to the other example H5Ps I talked about. I linked out particularly because many of the types I showed are actually not available in the Interactive Video content type.

All told, I think the writing and recording took about 3 hours, and creating the interactions for H5P (with not a tonne of preplanning of interactions) was another 2ish hours. I think next time around I could do a lot of it faster, but I will say here especially an ounce of planning is worth a pound of production time.

One thing I had thought about, but that I didn’t implement this time around was pre/post testing. I think in some cases, I could have introduced a pre-test which would then direct viewers to relevant portions of the video. Definitely an idea I’m keeping in mind for next time around.


Old Car near Merritt, by the BC Ministry of Transportation, CC-BY-NC-ND 2.0