Add support for Vimeo embedded videos

[thorprichard]

It was mentioned on the H5P.org website, but I don't think the request ever made it here officially. Vimeo offers much of the same capabilities and flexibility for embedding videos. The biggest advantage over YouTube is that Vimeo isn't (as likely to be) subject to content filtering by educational institutions (in the United States), and therefore is the preferred video hosting provider for numerous online learning courses. Thanks for your consideration of this feature request!

[falcon-git]

Thanks for reporting! Please be aware that last time we checked Vimeo didn't offer the APIs we need to work with it in Interactive Video for instance. I believe the paid version of Vimeo give you access to the video streams directly and you should be able to use the directly in todays version of H5P.

[thorprichard]

Great suggestion re: the paid version of Vimeo (which is what we're using). I'll look into that. Thanks!

[samwalther]

We also have paid version, what do you mean by ¨Vimeo give you access to the video streams directly and you should be able to use¨ . You mean to say download and upload the video into h5p?

[icc]

No, Vimeo Pro has a feature where you get a direct link to the video file, which you can input into the URL field when adding a video source in H5P content.

I also know some people upload their videos to Google Drive and then add #.mp4 to the public share URL and input it as a video in H5P. It works, but I don't know how good of a solution it is for bigger sites.

[samwalther]

I was able to get it working with vimeo pro version by going into setting and getting one of the HD url from there. Thanks a lot.

What do you mean by ¨then add #.mp4 to the public share URL ¨ for google drive. Thats also good solution for us if we can get it working with google drive.

[icc]

When adding files to Google Drive you should be able to obtain a direct URL to the file by: Right clicking the file, selection Share... and in the dialog that pops up click the small round link icon in the upper right corner. It should turn green when active. Now you get an URL that links directly to the file. However, this URL has no file ending, so for the video player to be able to detect which format the video file is you must add a hash tag to the end of it, e.g. #.mp4 or #.webm (depending on what you upload)

However, using this instead of Vimeo Pro will mean less specialized support and different TOS and probably quality too. But it is free :-)

[docmoritz]

With Vimeo pro it works for me without any problem

[falcon-git]

Good to know, thanks for sharing @docmoritz

[Jarvil]

Hello,

So when the Vimeo basic support is coming?

[falcon-git]

Don't think it was possible last time we checked.

Don't think vimeo had the APIs we need last time we checked.

[CSWood]

Hi. an initial comment mentioned using paid version of Vimeo but a subsequent comment specified Vimeo Pro as this has a direct link to the video file. Do you know if Vimeo Plus can be used instead of Vimeo Pro? The price table on Vimeo states that the plus and pro versions store the original file as well as the transcoded version, is this what was meant by direct access to the stream?

[CSWood]

Just tried using Google drive and dropbox and I get error messages saying that the file type is not supported. I'm using the Wordpress plugin. Ideas on what might be going wrong anybody?

[icc]

I'm not sure if Plus gives you the same access as Pro, but it sounds like it should. If you're looking for an alternative to Pro, I think that both Azure and AWS (Amazon) offers video conversion and distribution services with different pricing models.

Regarding cloud storage: Make sure that the URL ends in .mp4 or .webm, if it doesn't (usually the case with Gdrive) you can add the appropriate ending by using a # after the URL, e.g. sdf32143d#.mp4 and it should work if the file is publicly shared.

Note the when you're not using a service like YouTube or Vimeo you are responsible for ensuring that the video format is optimized for web and optionally providing additional sources for different quality levels. (Adding multiple sources with the same extension.) Free tools like ffmpeg may be used to convert and optimize videos before uploading them.

[CSWood]

Many thanks for getting back to me. I'd tried what you suggest for Google drive and it did not work for me. No matter, I've decided to opt for a Pro Vimeo account when my site is ready. In the meantime I'll host the video files on the Wordpress server directly and just change to the Vimeo URL when I'm ready. I'll have around 40+ hours of video and (hopefully) thousands of students accessing them. I was contemplating using Adobe presenter but was worried about hosting costs and bandwidth issues. H5P and Vimeo is a FAR better solution.

[foxylearning]

I have a question about how H5P works with both YouTube and Vimeo. Typically, both of these platforms dynamically adjust the video quality initially delivered to the end use based on things like internet connection speed and player size (e.g., see https://support.google.com/youtube/answer/91449?hl=en).

With H5P's support of YouTube, does this still happen? I'm assuming it does since the YouTube API is used and this method is more similar to embedding the video, but I'm not sure.

When using a direct link to a video on Vimeo Pro, I'm assuming that this cannot happen (since we are providing a link to a specific version of the video). Is that correct? If that is correct, would there be any way to make H5P support this with Vimeo Pro videos, too?

[icc]

By default, the setting will adjust automatically or by the preferences set by the viewer's YouTube Account Settings. The default depends on your bandwidth and the size(pixels) of the video player. E.g. if you enter fullscreen you should see a quality increase.

You may request another quality by using the quality selector. However, you are not guaranteed that YouTube will deliver it.

Yes, you are correct. By linking directly to the source(mp4/webm) the stream won't be adaptive in the same manner as with the YouTube Player. That said you can still specify multiple sources for the video, e.g. by adding 3 mp4 files. Interactive Video will treat them as different quality levels of the same video and you can manually switch between them.

I hope this answers your questions.

If you need to create the different quality levels yourself or optimize a video for web, this is a good guide on how you can do that for free: H.264 web video encoding tutorial with FFmpeg

[foxylearning]

Great, thanks. That's very helpful. I didn't realize we could specify multiple sources for the video (of the same file type). That should work for my purposes.

[RocketDesigner]

Great, Would appreciate this as well. The paid version of Vimeo (which is what we're using). Thanks!

[Mohankrish01]

Just wanted to let you know that someone utilized Vimeo API to alter their video player. http://museforyoushop.com/video-player-2.0-widget/vimeo.html. I am not sure if this would be helpful for H5P though.

We would be happy if we could use Vimeo in H5P just like Youtube videos.

[icc]

You have to be a paying customer in order to do that: https://help.vimeo.com/hc/en-us/articles/224969968-Embedding-videos-overview#how-do-i-customize-the-appearance-of-embedded-videos

Which I'm guessing that they are – or they're in violation of Vimeo's terms of service.

[theopen-institute]

Any new information on this? I believe Vimeo’s apis have improved recently.

[otacke]

@theopen-institute Could you possibly be a little more specific, e.g. post a link to your source or to the specific API page?

[theopen-institute]

@otake I don’t know enough about h5p’s inner workings to understand what kind of data is needed for better integration, but over the last two years vimeo’s API has gone from virtually non-existent to quite robust. Documentation is here: https://developer.vimeo.com/

I’m certainly not an expert on the Vimeo API, but if I need what kind of information h5p needed I could do some research.

[otacke]

@theopen-institute My question wasn't about how to implement the feature into H5P, but it's nice to have the source about vimeo's API changes instead of having to look for it. Last time I checked, the API neither provided a way to retrieve the URL nor a way to control the player as required by H5P.Video. I think that wasn't that long ago.

[theopen-institute]

@otacke There’s a JavaScript API for controlling the player here. It seems reasonably comprehensive. Is there anything in particular that was missing in the past?

For retrieving a URL, I don’t really understand what’s needed, but I’ll try to learn a bit more about how h5p works.

[otacke]

@theopen-institute You're correct. That looks promising on first sight. Hopefully someone in the community will have a look at it and create a module.

[icc]

I see that there are some nice improvements, however, you still have to be a Plus, PRO, Business or Premium customer in order to use a custom player with Vimeo, and if you are that you already have access to the direct source link which means that you can already use Vimeo videos inside H5P content.

[theopen-institute]

@icc I see, thanks for taking a look.

For my use case, the primary goal isn't to function without a pro account but rather to take advantage of Vimeo's automatic resolution switching. Right now, I get a lot of complaints from users who don't know how to switch on their own. I understand that might be a relatively small use case, however.