[opinion suggested] keyboard control for the videoPlayer

Colin Clark colinbdclark at gmail.com
Wed Aug 3 20:03:13 UTC 2011


Hey Charly,

Glad to hear you're making such good progress with the Video Player. It's exciting to see it shape up so well!

There are, at very least, a handful of fairly well established keyboard conventions for video. I'd recommend trying to stick with them where you can, and then do a quick competitive evaluation of the keyboard shortcuts in other popular players.

* Spacebar should toggle the Play/Pause button
* Left and right arrow keys typically skip forward and back by a frame, 
* Up and down arrow keys typically control the volume.

I don't think, in general, you need to be worried about shortcuts with modifier keys. People who have trouble pressing more than one key at a time will typically use a sticky keys feature built into their operating system to help with that. I think it's largely just a question of usability: the most commonly used controls should be really quick and easy for users to access with the keyboard. 

AT users will often have conflicts with most keyboard shortcuts, so you also want to have some kind of redundancy. As a result, you'll still want to make sure that each of the widgets in the Video Player are independently focusable with the Tab key and can be controlled with their usual keys. So the scrubber should still accept focus and be movable with the left and right arrow keys. Same with the volume control.

As a result, you'll have "global" and "local" keyboard shortcuts. Globally, the sorts of shortcuts listed above will be in effect. When the user has focus on a particular control, the arrow keys will be overridden to do their usual thing. You'll probably want to optionally bind these "global" keyboard shortcuts to the page as a whole so they are always available, regardless of which element is focused.

Have you thought about ways you can make your keyboard shortcuts configurable, so that if there are any conflicts, an implementer of the component can re-bind them? We did this with the Reorderer, though in a way that seems inconsistent with the general framework conventions today (the Reorderer was written largely prior to the framework):

https://github.com/fluid-project/infusion/blob/master/src/webapp/components/reorderer/js/Reorderer.js#L538-557

Here are some examples of other player's shortcuts:

You Tube:
http://www.makeuseof.com/tag/comprehensive-guide-youtube-player-keyboard-shortcuts/

FlowPlayer:
 *Key UP, ctrl+K: volume up
 * Key DOWN, ctrl+J: volume down
 * Key RIGHT: jumpseek forward
 * Key LEFT: jumpseek backward
 * space: toggle play/pause

QuickTime Player:
 * Space bar: Play or pause
 * Left Arrow: Stop playback and go back one frame
 * Right Arrow: Stop playback and go forward one frame
 * Option-Left Arrow: Go to the beginning of a movie
 * Option-Right Arrow: Go to the end of a movie
 * Command (⌘)-Left Arrow: Cycle through rewind speeds
 * Command (⌘)-Right Arrow: Cycle through fast forward speeds
 * Up Arrow: Turn volume up
 * Down Arrow: Turn volume down
 * Option-Up Arrow: Turn the volume up to the maximum level
 * Option-Down Arrow: Turn the volume down to the minimum level
 * Option-Command (⌘)-T: Show closed captioning
 * Command (⌘)-R: Show chapters
 * Command (⌘)-L: Loop the movie

Hope this helps,

Colin

On 2011-08-01, at 1:41 PM, charly molter wrote:

> Hi everybody,
> I've did quite a lot of progress recently on the videoPlayer and I'm
> currently trying to add some keyboard control to it.
> I need your help to try to find the best and more obvious ones with
> bearing in mind a notion of accessibility.
> So these are the few rules I've imposed:
> - Only one key at a time (no Shift+something) that is mainly because
> combination of keys can be hard
> - No usage of the numeric pad (many laptop haven't got one)
> - The keys should be obvious.
> 
> Here is what I've fought for the moment :
> play/pause : "p"
> volume + : "+"
> volume - : "-" (these really need to change indeed on a azerty apple
> Keyboard they both need shift and I'm sure azerty is not the only
> keyboard that need it)
> fullscreen on/off: "f"
> captions on/off: "c"
> video forward: "t" (this has been chosen as it is often next to the "r" key)
> video rewind: "r"
> 
> for the volume change and video change I thought about using right,
> left, up and down + shift for eg but the combination of keys doesn't
> seem really accessible to me.
> What's your opinion?
> I'm open to any kind of suggestion so please don't hesitate

---
Colin Clark
Technical Lead, Fluid Project
http://fluidproject.org



More information about the fluid-work mailing list