Interactive Video Controls not responding to kbd commands (fix discovered)

  1. Steps to recreate the bug
    Tab to any control, e.g., Play (focus indicated by CSS change)
    Press Space bar... it does default page-down, video does not play.

  2. Platform you're using: Drupal, Wordpress, Moodle (version number would be helpful as well)
    Wordpress 4.7.2 en_CA

  3. Mobile or Desktop
    Desktop

  4. Browser: Chrome, Firefox, Safari etc
    Firefox 51.0.1 

  5. H5P plugin version
    Version 1.7.10

  6. H5P content type version
    Interactive Video 1.14.0

  7. Screenshots if it's a visual problem
    Firebug console pointed to
    Error line 26711: event not defined.

I think I fixed it:
Downloaded cached .js from .../wp-content/uploads/h5p/cachedassets and navigated to line 26711, discovered this block of code:

  on: {
    click: function () {
      handler.call(this);
    },
    keypress: function () {
      if (event.which === 32) { // Space
        handler.call(this);
      }
    }
  }

 

Opened local copy ....\wp-content\uploads\h5p\libraries\H5P.InteractiveVideo-1.14\scripts\interactive-video.js
I found this snippet at Line 1323, and added event as argument:

  on: {
    click: function (event) {
      handler.call(this);
    },
    keypress: function (event) {
      if (event.which === 32 || event.which === 13) { // Space or Return
        handler.call(this);
        event.preventDefault();
      }
    }
  }

Also added event.preventDefault(); after handler call to prevent page movement, and support for Return key, because I could never figure out why the spacebar was chosen for this task in the first place (what's wrong with Page Down?)

The expected functionality has returned. Once-again-working-version can be seen at http://bit.ly/rcfCTA3scales


Content types: 
fnoks's picture

Hi,

Thank you for you for reporting this :) I have created an issue here: https://h5ptechnology.atlassian.net/browse/HFP-765