Custom Interactive Video

Hi, 
I'm trying to create a custom interactive video without modifying the H5PInteractiveVideo library. My idea was to create a new library that instantiates the interactive video, but the wrapper does not fit to the video, and some interactions are not showing correctly (e.g. images doesn't show). 
Maybe there's some missing libraries, but I can't figure out which one is...

I've attached the h5p file, and a screenshot.

Can someone help me?
Thanks!

MY CODE:

library.json

{

  "title": "Dummy library",

  "description": "Library for testing",

  "contentType": "Media",

  "majorVersion": 1,

  "minorVersion": 0,

  "patchVersion": 0,

  "machineName": "H5P.DummyLib",

  "author": "test",

  "embedTypes": [

    "iframe"

  ],

  "runnable": 1,

  "fullscreen": 1,

  "coreApi": {

    "majorVersion": 1,

    "minorVersion": 6

  },

  "preloadedJs": [

    {

      "path": "scripts/main.js"

    }    

  ],

  "preloadedDependencies": [

 

    {

      "machineName": "H5P.InteractiveVideo",

      "majorVersion": 1,

      "minorVersion": 10

    }

  ],

  "editorDependencies": [

     {

      "machineName": "H5PEditor.InteractiveVideo",

      "majorVersion": 1,

      "minorVersion": 10

    }

  ]

}

main.js

H5P.DummyLib = (function ($, EventDispatcher) {

var interactiveVideo;

var options;

var id;

 

/**

 * Constructor function.

 */

function C(options, id, contentData) {   

this.id = id;

   this.options = options;

   

   this.interactiveVideo =  new H5P.InteractiveVideo(this.options, this.id, contentData);    

};

 

/**

* Attach function called by H5P framework to insert H5P content into

* page

*

* @param {jQuery} $container

*/

C.prototype.attach = function ($container) {

// Añade el InteractiveVideo al DOM

this.interactiveVideo.attach($container);

 

};

 

return C;

 

})(H5P.jQuery, H5P.EventDispatcher, H5P.InteractiveVideo);

H5P file: 
icc's picture

Hello David,

It looks like what you're missing is the handling of the 'resize' events. This is needed because your content type will have to change size when the video is loaded and the interactive video changes size.

This is how I would set it up:

H5P.DummyLib = (function ($, EventDispatcher, InteractiveVideo) {

  /**
   * Constructor function.
   */
  function DummyLib(options, id, contentData) {
    var self = this;

    // Keep track of our Interactive Video
    var IV;

    /**
     * Attach IV to given $container. Creates new IV if there is none.
     */
    self.attach = function ($container) {
      if (IV === undefined) {
        IV = H5P.newRunnable({
          library: 'H5P.InteractiveVideo 1.10', // Must match library.json
          params: options,
          userDatas: contentData
        }, id, $container, false, {parent: self});

        // Handle video resizing
        IV.on('resize', function () {
          self.trigger('resize');
        });
      }
      else {
        IV.attach($container);
      }
    };
  }

  return DummyLib;
})(H5P.jQuery, H5P.EventDispatcher, H5P.InteractiveVideo);

Hi icc,

first, thanks for answer.

It worked! Thank you! Looks like that was the problem... 

I want to reproduce the same with the H5PEditor.InteractiveVideo library. Want to create an independent library (like HP5Editor.InteractiveVideoCustom) that extends H5PEditor.InteractiveVideo without modifying its code, and then replace it at library.json. 

Do you know how can I extend this not runnable library?

 

Thanks in advance!

icc's picture

It's probably easiest if you start by creating a copy of the existing editor library. Then you add the editor dependency to library.json, modify semantics.json and change the "widget": "interactiveVideo" property to e.g. dummyVideo. Then you must change the widget definition in the .js file in the editor library you copied, e.g. H5PEditor.widgets.interactiveVideo into H5PEditor.widgets.dummyVideo.

You can look at simpler editor widget to find out which functions must be implemented in your editor widget.

Great, thank you!

I got it almost working, but there's one last issue with Editor styles. 

Styles are not showing correctly even thought if I add the original "H5PEditor.interactiveVideo".

<code>

  "editorDependencies": [

     {

      "machineName": "H5PEditor.InteractiveVideo",

      "majorVersion": 1,

      "minorVersion": 10

    }

  ]

</code>

I've attached 2 screenshot showing this issue and an error that throws in javascript console.

Thanks for help!

Attachments: 
icc's picture

That is strange. In your console you should be able to see if the CSS file is loaded by inspecting the H5PIntegration.loadedCss array.

When you're getting the YT.Player error it means that it's trying to insert the YouTube video before the YouTube API is loaded. When looking at youtube.js that shouldn't be possible, so I'm not sure why you're getting this…