• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Interactive Video - Click Box shortcut Right/Left Arrow problem

New Here ,
Mar 05, 2020 Mar 05, 2020

Copy link to clipboard

Copied

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~!

TOPICS
Advanced , Advanced actions , Audio and video

Views

324

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Mar 10, 2020 Mar 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 us

...

Votes

Translate

Translate
Community Expert ,
Mar 06, 2020 Mar 06, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 10, 2020 Mar 10, 2020

Copy link to clipboard

Copied

LATEST

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources