diff --git a/README.md b/README.md index a956d7a..7fdc23b 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,8 @@ videojs('vidId').ready(function() { The **Enter**/**Return** key may be used instead to activate the control elements. (default: `false`) (**Note:** This feature may break accessibility, and cause unexpected behavior) - `enableInactiveFocus` (boolean): This reassigns focus to the player when the control bar fades out after a user has clicked a button on the control bar (default: `true`) - `skipInitialFocus` (boolean): This stops focusing the player on initial Play under unique autoplay situations. More information in [Issue #44](https://github.com/ctd1500/videojs-hotkeys/issues/44) (default: `false`) +- `captureDocumentHotkeys` (boolean): Capture document keydown events to also use hotkeys even if the player does not have focus. If you enable this option, **you must** configure `documentHotkeysFocusElementFilter` (default: `false`) +- `documentHotkeysFocusElementFilter` (function): Filter function to capture document hotkeys (if `captureDocumentHotkeys` is enabled) depending on the current focused element. For example, if you want to capture hotkeys when the player is not focused and avoid conflicts when the user is focusing a particular link: `documentHotkeysFocusElementFilter: e => e.tagName.toLowerCase() === 'body'` (default: `() => false`) - `enableJogStyle` (boolean): Enables seeking the video in a broadcast-style jog by pressing the Up and Down Arrow keys. `seekStep` will also need to be changed to get a proper broadcast-style jog. This feature and the changes for seekStep are explained a bit more in [PR #12](https://github.com/ctd1500/videojs-hotkeys/pull/12) (default `false`) diff --git a/videojs.hotkeys.js b/videojs.hotkeys.js index edd3b39..4a910c4 100644 --- a/videojs.hotkeys.js +++ b/videojs.hotkeys.js @@ -36,6 +36,8 @@ enableNumbers: true, enableJogStyle: false, alwaysCaptureHotkeys: false, + captureDocumentHotkeys: false, + documentHotkeysFocusElementFilter: function () { return false }, enableModifiersForNumbers: true, enableInactiveFocus: true, skipInitialFocus: false, @@ -70,6 +72,8 @@ enableNumbers = options.enableNumbers, enableJogStyle = options.enableJogStyle, alwaysCaptureHotkeys = options.alwaysCaptureHotkeys, + captureDocumentHotkeys = options.captureDocumentHotkeys, + documentHotkeysFocusElementFilter = options.documentHotkeysFocusElementFilter, enableModifiersForNumbers = options.enableModifiersForNumbers, enableInactiveFocus = options.enableInactiveFocus, skipInitialFocus = options.skipInitialFocus; @@ -122,18 +126,22 @@ var keyDown = function keyDown(event) { var ewhich = event.which, wasPlaying, seekTime; - var ePreventDefault = event.preventDefault; + var ePreventDefault = event.preventDefault.bind(event); var duration = player.duration(); // When controls are disabled, hotkeys will be disabled as well if (player.controls()) { // Don't catch keys if any control buttons are focused, unless alwaysCaptureHotkeys is true var activeEl = doc.activeElement; - if (alwaysCaptureHotkeys || - activeEl == pEl || - activeEl == pEl.querySelector('.vjs-tech') || - activeEl == pEl.querySelector('.vjs-control-bar') || - activeEl == pEl.querySelector('.iframeblocker')) { + if ( + alwaysCaptureHotkeys || + (captureDocumentHotkeys && documentHotkeysFocusElementFilter(activeEl)) || + + activeEl == pEl || + activeEl == pEl.querySelector('.vjs-tech') || + activeEl == pEl.querySelector('.vjs-control-bar') || + activeEl == pEl.querySelector('.iframeblocker') + ) { switch (checkKeys(event, player)) { // Spacebar toggles play/pause @@ -418,6 +426,10 @@ player.on('mousewheel', mouseScroll); player.on("DOMMouseScroll", mouseScroll); + if (captureDocumentHotkeys) { + document.addEventListener('keydown', function (event) { keyDown(event) }); + } + return this; };