Switching from YouTube to Kaltura For H5P Interactive Video

In this kitchen tip we have an option for those using the H5P Interactive Video content type.

With this tool, a video can be augmented with stops on the playback to insert popup information relevant to that point in the video or it can insert interactive questions at that point (multiple choice, true false, fill in words, drag and drop, more). It’s great for putting a practice problem in the context of a video.

As H5P tools go, it’s easy to use, as it takes the link to a YouTube page for the video as the source to set it up. And I would guess, that’s about 99% of the way it is used, for content hosted in YouTube.

Add a Video interface in H5P, shows a button to upload video or a field to enter URL for a YouTube link or video source URL

You can just paste in the URL for any public YouTube video, like https://www.youtube.com/watch?v=lkcwelfAuks and the magic happens (uploading videos is not encouraged on busy servers and are likely limited by storage caps).

But here is the problem.

YouTube.

At the end of all YouTube videos, viewers are presented with videos YouTube picks for you. There is no way as a web site publisher when embedding videos you can prevent this (the old trick of adding &rel=0 to the URL was taken away by YouTube in 2018). And also, YouTube, the company (a.k.a Google) harvests data on all activity.

That is the price we pay for the ease of use. YouTube manages what is shown on screen. We’ve heard plenty of horror stories of teachers getting inappropriate recommended videos when showing clips in class.

One of our projects, for Concepts of Biology, is working with a set of 20+ short explainer type videos currently hosted in YouTube. They asked if there was a way to stop having the YouTube video recommendations pop up at the end (by the way, thi exchange happened all in our Mattermost space, again the optimal place to get project support).

But another possibility arrived relevant to this project. Clint Lalonde noted that all of the videos for this project were supported by a previous grant and are already available on a BCcampus managed Kaltura server.

An open source platform, Kaltura provides a service somewhat like YouTube without the advertisement based activity. You likely have access to a Kaltura service your institution.

Some of you may want to use your institution’s Kaltura hosted videos, especially if your video content is there. The thing you should consider though, is that these open textbooks will be remixed and used by other educators. The project wants to ensure that the video source will remain available at durable links, so we prefer that if you want to use Kaltura video for your own projects, to contact us about how to get them uploaded and available there. Any videos hosted by BCcampus should be original ones you have created or ones that are explicitly open licensed for reuse.

Using the Interactive Content Type, for video hosted elsewhere, H5P requires a direct URL to a video source, e.g. something that ends in .mp4. And this does not seem to be publically available in the share link options of Kaltura sites.

It requires a bit of technical peeking into the HTML source and manual editing of URLs (see my blog for the technical nuts and bolts and the making of an end-around I built).

But I managed to build a simple tool (a google spreadsheet) that has a formula built in that can do the magic of extracting the link H5P wants for a video hosted on the BCcampus Kaltura server.

For the example here we use the Evolution and Natural Selection video available at https://video.bccampus.ca/media/Evolution+And+Natural+Selection/0_ey4h9lel

While you can watch the video at that address, it will not work as a source in the H5P Interactive Video tool. Feel free to try!

First get a copy of the Kaltura Video URL Fetcher as a spreadsheet in your own Google Drive (if you like this trick, it works in any Google Doc/Spreadsheet item! Just make it public viewable ,not editable, and in the Share link URL change “edit” at the end to “copy”).

Spreadsheet view of "Get Direct Links to BCcampus Hosted Kaltura Video" the cell for BCcampus Kaltura Share URL is selected, and we can see that the web address above is entered. Below are cells with values for Video Title, Link to Poster Image, and Link to MP4 video

Then enter in the cell adjacent to BC Campus Kaltura URL the web address for the video. It may take a few seconds, but the cells below will change to reflect the information for the video you entered.

It’s a little tricky to get the link as the spreadsheet cell is a formula. Just hover over the cell and use the Copy Link button to get the URL.

The Video Title is displayed just to confirm that this is the video you are expecting. Click the Link to Poster Image (for this example it is http://admin.video.ubc.ca/p/122/sp/12200/thumbnail/entry_id/0_ey4h9lel/width/400) to download a JPEG image that is used to represent the video when it is displayed (YouTube does this for you, but you have to upload an image for non-YouTube content). And then copy the web address for Link to MP4 video (for this example https://admin.video.ubc.ca/p/122/sp/12200/playManifest/entryId/0_ey4h9lel/flavorId/0_7ql6o5az/format/url/protocol/http/a.mp4)

Now we can turn to the H5P Interactive video editor; in the field for Paste YouTube link or other source URL) enter/paste the value for Link to MP4 video we copied from the spreadsheet).

The Add to Video screen for H5P Interactive Video editor, an arrow points to the field where the mp4 video is entered.

Click Insert. The black box to the left that represents the video will display “mp4” if it was able to connect to the video.

The editor will show a Video Quality field; enter 1080p for videos from BCcampus’s Kaltura server.

A black box appears with "mp4" label indicating the video is loaded. The Video quality label field is highlighted to show 1080p entered as the proper value.

Open the Interactive Video tab to show additional fields.

If you add a title and optional description, these are displayed on the video below the “play” button. These are optional but might be nice to have for providing more guidance to the purpose of the video (and you don’t get this feature with YouTube content!).

Field for "The title of this interactive video" is entered as "Chapter 1 Interactive Video". The "Hide title on video start screen" box is unchecked. In the field for Short Description is entered "This is the key to understanding this chapter"

Just to give a preview, this is how these fields are displayed when viewed:

A preview of the playback screen shows a black semi transparent background centered on the video with a large play button, below this are the title and description text entered above.
How these title field are shown to a viewer; a bonus feature you do not get with YouTube content!

There is one more thing to edit! At the bottom of the Interactive video drawer, is a place to upload the poster image- this is what is shown to a user before they click “play”, and you can use the one you downloaded from the spreadsheet. If you want to use a different image, for best display, the image should be the same proportion as the video size (1980px wide by 1080px high).

From here you can add all of the interactions the H5P tool provides, but now it is using video from Kaltura rather than YouTube.

As an example of the difference, see the demo H5P items we created to help the Concepts of Biology Team (The YouTube one had a different poster image added). This is the Interactive Video using source from YouTube. Play it to the end to see how it shows recommended videos at the end.

Now compare to the same content, but published with video from the BCcampus Kaltura server.

Please let us know if you are interested in having your video content hosted on the BCcampus Kaltura server and taking advantage of this option.

It’s a few more steps, but makes for an Open Textbook a little less tied to a commercial, advertisement driven service. That’s how cooking goes!


Image Credit: A cropped portion of Image by Marc Pascual from Pixabay edited by Alan Levine to replace the labels on the old TV knobs.

15 Comments

Hi Thomas,

I can only make guesses because I do not know how Kaltura is configured elsewhere. If you made a copy of the spreadsheet before 10 days ago, the first version does not work. The working version of the spreadsheet should have v0.2 in the title.

The Kaltura page to see the video does need to be public. All the sheet does is look to the source HTML of the page and look for the open graph meta tags. If you can view your private video’s page source, do a search for og:video which is part of a meta tag; the URL you need is in the content=…” parameter of that tag. It will end in .mp4

You should check if that URl can be opened without a login, it will not work in H5P if it is not accessible.

It seems like bccampus’s kaltura has the og:video meta in the html. But I just looked at our institution’s mediaspace and it does not. How did you configure Kaltura to display the og:video in Kaltura?

Thanks.

Hi Robin,

I actually have no access to the Kaltura server to know how it is set up, and their online documentations is rather sprawling. There nearest I can guess is that it is something you get when you enable sharing options. It also would require (I am guessing) that the the media has public access.

Let me see if I can get someone from BCcampus to chime in.

I’ve put a request in JIRA, so hopefully George will be able to take a look at BC Campus Kaltura settings to advise. But I think it may have something to do with Open Graph api or the Facebook module.

Hi Robin,

I don’t think we have enabled anything special to get the additional tags. At least when I look in Mediaspace admin I do not see any setting that is specific to enabling the OG tags. But that doesn’t mean that we don’t have a setting enabled that you don’t that adds the OG tags. It’s just not obvious. I’ll grab a screenshot of the modules we have enabled in Mediaspace and send it to you as a PM. Compare what we have with what you have set up at your institution. Maybe we can find one we have enabled that you do not that also controls the OG tags.

Thanks Clint.

Alan, is there anything I need to change on the Google sheet? It seems like when I copy/paste in my URL, it’s returning everything as N/A.

Thanks.

Hi Alan,

I’ve finally gotten this to work. I’m wondering if we could bring this solution out of a Google Spreadsheet or if you know it will work in Microsoft Excel on OneDrive?

We’re very much against having stored anything in Google here at KPU.

That’s great news, Robin. From some testing and searching, Excel does not support the ImportXML functions I used. Would it work for you if I recast it:

  • As a small HTML site that did the work via jQuery
  • A web page with the work done via PHP

I think that would be fabulous, with either option.
In fact, if I put you in touch with my developer I’m wondering if you could guide him, so he could put it on KPU’s servers so it’s stored locally. (Of course, attribution to you. 🙂

Has anyone gotten this working post-migration to the Canadian Cloud? Our old method of discovering the URL has stopped working, and the spreadsheet is giving me all N/As and “Error: imported content is empty.”

Leave a Reply to Alan Levine Cancel reply