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~!
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
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:
Workflow is described in:
http://blog.lilybiri.com/interactive-video-navigation-bookmarks
Copy link to clipboard
Copied
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.