jPlayer 2.2.17 dev pushed to GitHub:
[2.2.17] New Feature: Added keyboard controls that effect the jPlayer instance in focus.
The last instance played has focus, or the first instanced with the feature enabled.
The option
keyEnabled
(default: false) is used to turn the feature on.
The option
keyBindings
is an object used to define actions with their key and function.
The option
audioFullScreen
(default: false) allows key controls to display audio poster images in full screen, which is useful for media players.
eg., A player that has both video and audio media in a playlist.
The method
jPlayer("focus")
may be used on an instance to gain focus without playing.
Additional:
The default keyBindings are:
- SPACE play/pause toggle
- ENTER full screen toggle
- UP/DOWN arrows inc/dec volume by 10%
- BACKSPACE muted toggle
By default, the keyboard controls are not enabled. Enable them by setting the option:
keyEnabled: true
The keyBindings are of the form:
{
actionName: {
key: keycode,
fn: function(focus) {}
}
}
For example, the play/pause toggle is:
{
play: {
key: 32, // space
fn: function(f) {
if(f.status.paused) {
f.play();
} else {
f.pause();
}
}
}
}Other keyBindings may be added to an instance. When the instance is in focus, those key bindings will be checked. For example, the playlist code will be revised so that the LEFT and RIGHT keys control changes to the next and previous tracks.
In general, the "focus" will have no effect when there is only 1 jPlayer instance. It comes into effect when there are multiple instances, where we need to know which instance to direct the commands to. So... Whichever instance played last has focus... And during instancing, the 1st instance instanced with the keyEnabled option true will be given focus.
The is a keydown event handler added to the document regardless of whether key controls are used or not. It does nothing unless an instance gains focus, which cannot happen unless an instance has keyEnabled:true. This handler may be removed if you have problems, using:
$.jPlayer.keys(false);The coding also attempts to distinguish between key commands and when you type into an input field. There is a block list of elements to ignore key events on, and this may be controlled using the variable shown below. Its default is also shown.
// The list of element node names to ignore with key controls.
$.jPlayer.keyIgnoreElementNames = "INPUT TEXTAREA";If you find you need to add an element name, then add it to the string, separated with a space. For example:
$.jPlayer.keyIgnoreElementNames = "INPUT TEXTAREA BANANA";Known issue notes:
It is expected that the key controls will not work when Safari has entered full screen.
I need to add in the code to enable keys to work while in full screen. Bit odd that, but maybe there is a reason why safari did it that way, with a code to pass as param on fullscreen command... I know there is general concern with the full screen api that phishers can attempt to steal user data by using full screen dummy screens and videos... The thing is though, the phishers would just slap that code into their page. I guess you can force the option off in thee Safari options somewhere that only the truly OCD and paranoid venture.
Whoops, started rambling there.