Skip to main content
R
RDHarrisCAE
New Participant
March 5, 2020
Answered

Interactive Video - Click Box shortcut Right/Left Arrow problem

  • March 5, 2020
  • 2 replies
  • 411 views

I have been trying to find a solution to a problem with capturing key shortcuts with the Click Box for interactive videos.


A Click Box listening for Arrow Right while the video is playing works fine. (send to a bookmark) However with the overlay slide on top, it no longer captures the arrow key. So, I added a Click Box to listen for Arrow Right in the Overlay Slide. That works, but when the Overlay Slide is gone, the Click Box on the video no longer works.

 

I am aware that one cannot have two Click Boxes listening for the same shortcut (key) on the same slide. It would seem that the Overlay Slide's Click Box "destroys" the listener for the Click Box on the video. This makes it seemingly impossible to have left and right arrow keys navigate between bookmarks that will work while both playing and paused with an Overlay Slide.


I have tried to hide/show the click boxes so that only one Click Box is active at a time, but no success yet. I have tried to initiate the hide/show with the exit for the Overlay Slide as well as in the Advanced Action for the click or key events themselves. I have tried staggering the Click Boxes on the video layer so that they are not present during the Overlay Slide points. All to no avail!

 

Please advise! This is a critical feature for a project I'm working on and I really need to find a solution!

 

Thanks kindly~!

This topic has been closed for replies.
Correct answer RDHarrisCAE

Sharing my solution..

The solution I ended up going with was a combination of Advanced Actions, and JavaScript. I kept the keyboard shortcut active on the click-boxes in the overlays, and used a 'window.onKeyDown' type of script on the video slide itself. This worked really well with none of the click-boxes shortcut listeners being destroyed. The JavaScript is "faking" a click on the click-boxes that are on the video slide. (Which are not listening for a keyboard shortcut).

Here is the script I used for capturing the arrow keys on the video slide:

window.onkeydown = function (e) {
    switch (e.keyCode) {
        // Left Arrow key
        case 37:
            var box = $('#Click_Box_BACK')[0];
            cp.clickHandler(box);
            break;
            // right Arrow key 
        case 39:
            var box = $('#Click_Box_NEXT')[0];
            cp.clickHandler(box);
            break;
    }
};

 Hope this helps anyone looking to solve this, or a similar issue. 

2 replies

R
RDHarrisCAEAuthorCorrect answer
New Participant
March 10, 2020

Sharing my solution..

The solution I ended up going with was a combination of Advanced Actions, and JavaScript. I kept the keyboard shortcut active on the click-boxes in the overlays, and used a 'window.onKeyDown' type of script on the video slide itself. This worked really well with none of the click-boxes shortcut listeners being destroyed. The JavaScript is "faking" a click on the click-boxes that are on the video slide. (Which are not listening for a keyboard shortcut).

Here is the script I used for capturing the arrow keys on the video slide:

window.onkeydown = function (e) {
    switch (e.keyCode) {
        // Left Arrow key
        case 37:
            var box = $('#Click_Box_BACK')[0];
            cp.clickHandler(box);
            break;
            // right Arrow key 
        case 39:
            var box = $('#Click_Box_NEXT')[0];
            cp.clickHandler(box);
            break;
    }
};

 Hope this helps anyone looking to solve this, or a similar issue. 

Lilybiri
Lilybiri
Legend
March 6, 2020

Not a real answer, my apologies. I always offer a bookmark menu to the learners when I create an interactive video. Seems to me that it gives more control to the learner than the approach you take. Also, bit reluctant to the use of click boxes, because I have a feeling it is an object which will be deprecated soon (is not allowed in a Fluid Boxes project).

You can have a look at an example of such a menu in:

Custom Play/Pause button

Workflow is described in:

http://blog.lilybiri.com/interactive-video-navigation-bookmarks

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices