ctd1500 / videojs-hotkeys

Adds more hotkey support to video.js
Apache License 2.0
196 stars 107 forks source link

Is it possible to trigger a click on a ControlBar button with a custom key? #45

Closed borzaka closed 6 years ago

borzaka commented 7 years ago

I have a custom button in the ControlBar, it would be nice if I could trigger a click on that with a custom key.

Fruitsapje commented 7 years ago

I think you can use the custom hotkeys options of this plugin if you have a click function on your custom button.

Then you get something like this in the hotkeys options:

customKeys: {
 // Create custom hotkeys
    ctrldKey: {
         key: function(event) {
         // Toggle something with CTRL + D Key
         return (event.ctrlKey && event.which === 68);
     },
         handler: function(player, options, event) {
             // Trigger your custom button click function here
         player.controlBar.rewind.handleClick();
      }
      }
 }

Hope this helps

ctd1500 commented 7 years ago

Yes, that's entirely possible to do. I do it in one of my own projects and it works perfectly. Similar to the example above, but with a selector

    handler: function(player, options, event) {
        $('.vjs-custom-button').click();
    }
borzaka commented 7 years ago

Thank you guys for the ideas! Unfortunately the handleClick() function didn't worked for me, but the trigger('click') did. I wanted to do this without jQuery to make it simple. Edit: the handleClick() worked after all.

I have a custom chapterPrev and chapterNext button in the ControlBar. I wanted to click them with custom keys, but I realized I could use the built in rewindKey and forwardKey.

I ended up with this. I disable the default rewindKey/forwardKey, and set up my custom handler for the arrow keys.

hotkeys: {
    rewindKey: function(event, player) {
        return false;
    },
    forwardKey: function(event, player) {
        return false;
    },
    customKeys: {
        rewindKeyCustom: {
            key: function(event) {
                // Left Arrow or MediaRewind
                return (event.which === 37 || event.which === 177);
            },
            handler: function(player, options, event) {
                player.controlBar.chapterPrev.trigger('click');
            }
        },
        forwardKeyCustom: {
            key: function(event) {
                // Right Arrow or MediaForward
                return (event.which === 39 || event.which === 176);
            },
            handler: function(player, options, event) {
                player.controlBar.chapterNext.trigger('click');
            }
        }
    }
}