Interactive video for Django server

Submitted by Neevix on Thu, 11/17/2016 - 12:41
Forums: 
General discussion

Hi,

I am currently working for the IT Department of the Learning Center of the Lille 1 University of Sciences and Technologies, France.

We have a site, hosted by a Django type server, which allows to create / share / broadcast videos for pedagogical purposes. In order to add more interactivity to these videos I am interested by H5P. 

I try to integrate the technology from H5P which allows to add interactive elements on a video, knowing that we already have a video player (videojs). 

How do you think I should approach this integration ? I'm not trying to integrate the entire plugin but "only" the video editor. Do I need to adapt the entire H5P php-library ? Can Javascript code be reused without major modifications ? I am mainly looking for advices on which library I need to adapt in Python. Ultimatly, we are looking to import H5P to recreate it in a smaller version, which would only support video editing and interactive elements on video.

Thank you in advance for your answers !

tim's picture

tim

Thu, 11/17/2016 - 16:33

Hi, 

It's always exciting to hear that people are interested in porting H5P to other languages. This documentation may be useful in giving you an idea of how to approach it: https://h5p.org/creating-your-own-h5p-plugin - however, it's still a work in progress.

To get the authoring tool to work you will need to port two libraries:

  1. h5p php library
  2. h5p editor php library

As long as the php libraries have been ported correctly, Interactive Video's javascript code can be reused without any modifications. Note that Interactive Video has two libraries, the editor and the main library. 

I would say that it will be quite hard to recreate Interactive Video by itself as it depends on the other content types (if you want the interactions) and it may fall behind in terms of updates - it's a huge challenge! You will need to study the relationships between Interactive Video and the content types deeply to integrate them properly.

Let me know how it goes.

Neevix

Thu, 11/17/2016 - 20:29

Hi again !

Thank you for your quick reply ! I will start with the port of these two libraries. I hope to have set up the adaptation of H5P's PHP librairies for late December and so have a first version of this Python-H5P for late January. I am perhaps a little presumptuous with this deadline but I'm totally focused on this project !

I will keep you informed of the progress of the project.

See you soon !

tim's picture

tim

Thu, 11/17/2016 - 20:57

Good luck!

Neevix

Thu, 11/24/2016 - 11:43

Hello again !

The port of the two main libraries is going well. However, I'm trying to understand the link that is established between the PHP libraries and the web site. I'm more used to Ruby on Rails, Django and Python-Flask. Because of this I have some questions to understand how PHP interacts with the server :

Typically, when I go to a page with H5P content, what is in charge of the integration of JS and especially the H5PIntegration ?

icc's picture

icc

Fri, 11/25/2016 - 09:39

Ok, trying to see this from a Rails/Django perspective you would typically use the 'Core' as a 3rd party library or helper used in the 'view' part of your controller, determining the options needed for an H5P to 'run'. E.g. Loading the generic settings shared by all H5Ps: 
https://github.com/h5p/h5p-moodle-plugin/blob/master/view.php#L66
https://github.com/h5p/h5p-moodle-plugin/blob/master/locallib.php#L99

And then setting the content specific run parameters:
https://github.com/h5p/h5p-moodle-plugin/blob/master/view.php#L101

To gain access to the data/models needed by 'Core' – it defines an interface which needs to be implemented and return the data requested by 'Core'
Here is an example of this implementation for the Moodle plugin:
https://github.com/h5p/h5p-moodle-plugin/blob/master/classes/framework.php

The 'Editor' PHP library would be used for the 'edit' parts of the controller and when saving/updating:
https://github.com/h5p/h5p-moodle-plugin/blob/master/lib.php#L162

Of course, there are more elaborate ways of implementing this, but by sticking to more of a 'port' of the PHP libraries would be the easiest – at least to begin with.

daveb

Tue, 01/17/2017 - 18:33

Hello,

 

I have also explored implementing H5P for Django. I did not recreate the php libraries and interfaces as that was not as efficient as implementing the required data structures as Django Models and building specific views that handle the display of content.

Right now I have a form that accepts and h5p file for upload and a view that can render h5p content.

If you are interested I am happy to discuss my implementation in progress with you.

thomasmars's picture

thomasmars

Wed, 01/18/2017 - 09:41

I would love to hear what you think about the implementation and the challenges you have faced. Are you planning to make the implementation open-source ? Do you have a repository that we could look at ?

I think it would be nice if the community members that are working with a python implementation could come together and collaborate, so that we don't have redundant effort here. Would that be be an option for you ?

- Thomas

daveb

Wed, 01/18/2017 - 18:20

Yes, I am planning on sharing the basic h5p implementation. I was going to make sure it was in a minimally working state and add it to github. That should be in the next week or so.

I am happy to work with others on this, to get a different perspective on how to best implement it within a python system.

 

 

thomasmars's picture

thomasmars

Thu, 01/19/2017 - 10:09

Cool, looking forward to see the results :)

Neevix

Thu, 01/19/2017 - 10:55

Hello,

I come to give some news about the progress of my implementation of H5P to Django.

Currently, the application can :

  • Upload .h5p files
  • View H5P contents
  • Install the main H5P libraries from the officiel website and so get up to date with the latest version available of this libraries.

I'm working on :

  • Creation of H5P contents (Especially the Video Editor)
  • Managing user content

When a first functional and stable version of my application will be available I would add it on github. Many points need to be reviewed because I do not think I use the best methods of implementation. The interest is to have a first functional version at the end of the month for a demonstration to my University. I do not seek optimization, this will come later. 

Well, I would love to share everything that has been done. As thomasmars says the interest is to bring together the H5P community that works on Django to centralize our efforts.

daveb

Thu, 01/19/2017 - 19:53

Thanks, I am looking at a similar timeframe. Hopefully we can compare notes and come up with the best plan to implement h5p with django.

daveb

Mon, 02/06/2017 - 16:29

Hi,

I am continuing on my implementation of H5P in Django and I am still working on getting the editor functional.

Have you made any progress in this regard that might be helpful?

Thanks

icc's picture

icc

Thu, 01/19/2017 - 11:10

Hi! It's really cool to hear that you're making progress on this.

Would be awesome if the generic parts could be split out into a separate component that others could be used by other Django projects – however, I don't know the details, this could be difficult to achieve.

Keep on going and thanks for sharing!

daveb

Thu, 01/19/2017 - 19:56

The path I am taking is to create a h5p Django app that will run on any django site. It will support basic viewing, uploading and editing of h5p content.

Others can then build on this foundation to build whatever type of application on top of it.

For exmaple, I am creating some client-specific code that will function like a sort of LMS that meets their needs that will build on the H5P app.

tomaj's picture

tomaj

Fri, 01/20/2017 - 08:39

@icc, Did you mean other Python projects?

icc's picture

icc

Fri, 01/20/2017 - 09:22

Yes, that would probably be the best and prompt the most reuse – but if it has to be something Django specific to make it easier to reuse I think that is good as well :-)

Neevix

Mon, 05/29/2017 - 10:45

Hello !

It's been a while since I did not give news, I was particulary focused on the adaptation of H5P and my work in general. 

A beta of my plugin, H5PP (H5P Python), are done and it works today in production in our University of Sciences and Technologies of Lille. I've created a repository (https://github.com/DrClockwork/H5PP) on github. We focused mainly on interactive videos, so the complete "translation" of the plugin to Python are not totally completely finished on the other features of H5P. 

Be warned that it is a beta and only compatible for Django web framework. I don't think I have the time, in the immediate, to bring this project on other python web framework.

thomasmars's picture

thomasmars

Tue, 05/30/2017 - 09:24

Very cool! :)
I'm excited to try this out when I have some spare time.

gnewman

Tue, 05/30/2017 - 17:37

Just to add to this, I have forked H5PP and am working on getting it working under Python 3 and Django 1.10.  As soon as I have it stable enough I'll put in a PR and give back to H5PP.

gnewman

Tue, 05/30/2017 - 17:40

I have a fork of H5PP working under Python 3 and Django 1.10.  Lots of little bugs I'm working on and as soon as it's stable I'll put in a PR.

tomaj's picture

tomaj

Wed, 05/31/2017 - 07:36

It's really awesome that things are happening in the python space! :)

- Tom

Neevix

Mon, 06/12/2017 - 16:39

Hello !

I plan to upload a new release of H5PP but I encountered a problem that you will surely help me to solve. 

The video player for interactive video does not have a fixed size. According to the source video, the iframe has a different size. However, this is not that I want.  Can you tell me if there is a way for the video player to keep a predefined size ? Is it normally a functionality provided for H5P or do I have to look at a particular function in the source code ?

Thank you in advance !

icc's picture

icc

Tue, 06/13/2017 - 10:25

The only way to limit the size of the video player is to change the size of its container. E.g. place the video inside a <div> tag with max-width:600px and it won't get any bigger.

ptitloup

Mon, 07/16/2018 - 15:55

Hello,

I'm looking for integrate H5P with django application. Is-ti possible to have some link to have some information ?

Thanks