Embracing seiryoku zen’yō for H5P Video Without Youtube

Embracing seiryoku zen’yō for H5P Video Without Youtube

August 7, 2020 1 By JR

Today I ran into this post from Alan Levine, Google Sheet Karate Moves for Swapping H5P Video From YouTube to Kaltura. If you’re familiar with H5P you’ll know that one of the content types is includes is interactive video. This content type allows you to add bookmarks, questions, hotspots, etc. to video. I think when I first encountered H5P is was very timely because an instructor used to use Zaption to annotate video in a similar way, but that product was bought and probably left to rot somewhere. H5P’s interactive video has two primary ways to bring in video to then layer interactive elements to, a YouTube link, or upload a video. Each of these is not appealing for everyone so that seemed to greatly limit the tool.

Last week I ran into a problem trying to embed a video into a Pressbook. The video we wanted to embed did have a one click “copy the embed code” feature, but it was made using Javascript elements, and so the embed code itself started with the script html tags. Our version of Pressbooks did not like that at all so on the editing screen you’d see the classic little wordpress grey play button, and on the viewer side just a blank spot. At the time I couldn’t get it to work.

Fast forward to this week, reading Alan’s post reminded me that I could find the source for the video by looking at the page source. I think I had done that previously but overlooked the video. The other thing about this particular video is that is had four bookmarks. They would skip to specific parts of the video. So even if I just embedded the .mp4 s I would not have greater control with bookmarking. What I didn’t know about the H5P video tool was that when it says “enter your YouTube link” here it really means “point me to an mp4 file”. This greatly opens up the possibility for this tool. Going back to the video I needed, I found the .mp4 link dropped it into H5P, added the bookmarks manually, and voila! I did have to take a screenshot and add the image as the video “poster” to get the thumbnail, but it works!

But that’s just where this starts getting interesting. Alan’s use case is for a BCCampus specific project, and they have Kaltura as a video streaming service available. I haven’t used Kaltura in years, since I worked at ualberta, but I’m using Panopto for almost all of my video recording, basic editing, and streaming nowadays. I tried out the same process again, but this time with a Panopto video.

I went first to a video and checked the source on the full Panopto player page. Using command+F, I find a few places with .mp4 so I just grab one and try it. And it works!

I tried quite a few things. The default link with Panopto view and embed codes it to have /Pages/viewer or /Pages/embed in the URL. What I found with H5P is that you had to find the podcast link Podcast/Social/RANDOMSTRING.mp4. This works well for someone who has time and patience and knows this is the process to get your Panopto video into H5P, but that’s a fair amount of effort and not especially efficient.

Enter seiryoku zen’yō

One of the tenets of Judo (the Gentle Way) is seiryoku zen’yō (maximum efficiency, minimum effort). Thankfully Alan shared a second resource that hits this principle directly, the Google Spreadsheet. Using the Open Graph Check, and Google Sheets, Alan made a sheet you can copy that includes an importxml feature. Basically what it does is takes the viewer link you provide it, checks the data behind the source (including the title of the video, the thumbnail, and the video source) and shows you just those elements. If I drop the link into Open Graph Check I get this

But after some edits to the spreadsheet, I can drop the link into the spreadsheet and I get this

The table for Panopto is different than Kaltura so I just had to make some adjustments to which table cell would be chosen to populate my own spreadsheet and change the language from Kaltura to Panopto. Finally, I checked to see how it would look in Canvas by dropping in the H5P activity into a page using the HTML editor and it works perfectly

Panopto is a great tool, but I’ve always felt limited by the types of interactives it allowed (MCQ only). With this new approach I can see a world of possibility opening up for different kinds of activities being added to all kinds of instructional video.