Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request : Add Peertube support #40

Open
DegrangeM opened this issue Jun 17, 2020 · 11 comments
Open

Feature request : Add Peertube support #40

DegrangeM opened this issue Jun 17, 2020 · 11 comments

Comments

@DegrangeM
Copy link

It would be nice to add support for peertube video which is an opensource decentralised video platform that is slowly growing (for exemple, France is beta testing an instance for it's teachers).

It does have an api : https://docs.joinpeertube.org/#/api-embed-player

The difficulty is as it's decentralised, there is no way to know from the url that the video is on a peertube instance.

@DegrangeM
Copy link
Author

DegrangeM commented Jan 9, 2021

As mentionned in h5p/h5p-interactive-video#107 it's already possible to use peertube video, you just have to get a direct link to the mp4 file through the Download button on the peertube video page. However, it would be nice if h5p could handle the video automatically if a "classic" peertube url is given.

A possibility could be to add a peertube.js file with this content:

/** @namespace H5P */
H5P.VideoPeertube = (function ($) {

    /**
     * HTML5 video player for H5P.
     *
     * @class
     * @param {Array} sources Video files to use
     * @param {Object} options Settings for the player
     * @param {Object} l10n Localization strings
     */
    function Peertube(sources, options, l10n) {
      var self = this;
    };
  
    /**
     * Check to see if we can play any of the given sources.
     *
     * @public
     * @static
     * @param {Array} sources
     * @returns {Boolean}
     */
    Peertube.canPlay = function (sources) {

      // Cycle through sources
      for (var i = 0; i < sources.length; i++) {
        if (sources[i].path.match(/videos\/watch\/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}(\?[^\?]+)?$/)) {
            sources[i].path = sources[i].path.replace(/videos\/watch\/([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})(\?[^\?]+)?$/, "download/videos/$1-1080.mp4");
        }
      }

      // It might be possible to add all video quality source
  
      // return false even if a peertube video was found as it was transformed to an html5 format url
      return false;
    };
    
    return Peertube;
  })(H5P.jQuery);
  
  // Register video handler
  H5P.videoHandlers = H5P.videoHandlers || [];
  H5P.videoHandlers.push(H5P.VideoPeertube);

I tested it and it work. The peertube player is never really used, but when we check if we the peertube player can play the video and we detect we peertube video, we replace the url with the mp4 url. It's a little dirty because the canPlay function update the sources variable, but it's also a good solution because it let the html5 player do everything and we avoid having to copy the html5 player source code for nothing.

And other possibility could be to directly modify the html5.js file and to add code to handle the url modification in it. Not sure it's better.

An other possibility would be to detect the peertube url when we submit the url and to replace it here (with all quality possibility).

What's h5p team opinion on this ?

edit : my current solution is not good as the 1080p quality might not exist. I need to check if quality exist.

@otacke
Copy link
Contributor

otacke commented Jan 10, 2021

@DegrangeM Nicely done! You might want to check for the existence in of a direct link to a video file in https://github.com/h5p/h5p-editor-php-library/blob/master/scripts/h5peditor-av.js so the users will "fail early" if they want to use a peertube video that doesn't provide that link. Also, if there's a link available, the video widget thumbnail should say peertube instead of unknown.

@DegrangeM
Copy link
Author

@DegrangeM Nicely done! You might want to check for the existence in of a direct link to a video file in https://github.com/h5p/h5p-editor-php-library/blob/master/scripts/h5peditor-av.js so the users will "fail early" if they want to use a peertube video that doesn't provide that link. Also, if there's a link available, the video widget thumbnail should say peertube instead of unknown.

Yes after more thinking I think the better way to handle it is in the editor (because ajax request are asynchronous). I will use the peertube api ( https://docs.joinpeertube.org/api-rest-reference.html#tag/Video/paths/~1accounts~1{name}~1videos/get ) to check which quality are aviable and all one link for each quality (so it will display mp4 instead of unknow). I will try to code that next week end.

@rigelk
Copy link

rigelk commented Mar 26, 2021

@DegrangeM that is not the correct API route. To get the best quality, you should just extract the video id (its uuid) from the input url, and get the video info via https://docs.joinpeertube.org/api-rest-reference.html#tag/Video/paths/~1videos~1{id}/get. Then just cycle through the files attribute returned, only considering files that are of the desired mimetype.

@DegrangeM
Copy link
Author

You are right, thanks.

For now I put this PR aside because it's a little anoying to handle the asynchronous part from the UI point of view.

@EricGuic
Copy link

EricGuic commented Feb 14, 2023

Hi, is there any update on the (easy) support of Peertube's video inside H5P ? Thanks
On my side, I've tested the page and embed urls without succes.
Even the "Download" url seems buggy (try for example this url ending with .mp4 (the playlist of the HLS version transcoded by ffmpeg) : it produces a strange behavior, where the player is unable to read the duration of the video, and in result interaction dots never appears on the timeline.
https://tube.reseau-canope.fr/download/streaming-playlists/hls/videos/72772968-871a-4a52-9844-d5800657f2da-1080-fragmented.mp4

problem_in_h5p_with_donwload_url

Then I've tested to download on my local machine, then import directly this HLS_fragmented.mp4 inside H5P.
In that case, there is the same problem (with this strange indication in the duration "tab" of the player).
But if I use the webtorrent transcoding (and not the HLS one), it seems to work as expected.
So my guess is that the HLS produced by Peertube has some metadata encoding that H5P doesn't support.
If it could help to fix this...

@EricGuic
Copy link

Hi, any update of Peertube support in H5P ?
Thanks

@EricGuic
Copy link

EricGuic commented Oct 4, 2023

Hi, is this discussion still alive ? :-) Sorry but being not a developper, I'm unable to help by myself, except for some tests.
Thanks

@EricGuic
Copy link

Hi, I've just seen the roadmap for the next months of 2024. Better support for Vimeo or Panopto are listed.
Any chance to see some progress on Peertube support ?
Thanks for your update.
Regards.

@EricGuic
Copy link

EricGuic commented Sep 5, 2024

Hi, any update ? Thanks.
Regards

@f-teacher
Copy link

I'm also up for updates on this topic. IMO using FOSS tools together (H5p and peertube) makes so much sense.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants