# Keyboard plugin

This is a helper plugin to enhance the Wowza Flowplayer [accessibility features](/docs/wowza-flowplayer/plugins/keyboard/). The keyboard plugin allows you to navigate and control player elements using keyboard shortcuts.

## Installation

Load the plugin next to the core player and any other plugins (share, subtitles, quality selection) you require.


```html
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/keyboard.min.js"></script>
```

## Configuration

There is currently one config option to determine the seek step interval when using the [arrow or character keys](#player-buttons-and-bars) to seek in the timeline.

The option is configured in the `keyboard:` root object.

Numbers below 1 are used as percentages of the whole running time (so `0.2` for a 40 second clip will result in an 8 second seek), `1` and above will seek in seconds.

| option *unit* | description | example |
|  --- | --- | --- |
| `seek_step` *percentage (0-0.99)* or *seconds (1-x)* | time in seconds or percentage of whole running time | `keyboard: {seek_step: 20}` or `keyboard: {seek_step: 0.2}` |


## Usage

### Player buttons and bars

Switch the element focus by using `<tab>` to select a button or bar and use the designated key to call an action.

If there is no focus on any specific element, you can toggle fullscreen, play/pause, and mute directly with the respective keyboard commands. While an element is focused, only the actions connected to the element can be called.

| element | action |
|  --- | --- |
| `<esc>` *fullscreen* or *menu* | leave fullscreen or close a selected menu |
| `<spacebar>` *play button* and *seek (progress) bar* | toggle pause/play |
| `<m>` *mute button* and *volume bar* | mute/unmute sound |
| `<f>` *fullscreen button* | toggle fullscreen (you can exit fullscreen with `Esc` as well) |
| `<arrow up>` or `<k>` *volume bar* | volume up |
| `<arrow down>`or `<j>` *volume bar* | volume down |
| `<arrow left>`or `<h>` *seek (progress) bar* | seek backward |
| `<arrow right>`or `<l>` *seek (progress) bar* | seek backward |


### Menus and lists

if you select a menu like `HD`, `audio selection`, `subtitles`, `share` or `speed`, hit `<spacebar>` or `<enter>` to activate the menu and use the `<arrow up>` `<arrow down>` key to navigate to the desired list entry. Then, hit `<spacebar>` or `<enter>` `<esc>` to leave the menu.

### Demo with standard settings

[Codepen](https://codepen.io/team/flowplayer/pen/BebGbL)

### Demo with seek_step in seconds

[Codepen](https://codepen.io/team/flowplayer/pen/zVVPGp)

### Demo with seek_step in percentage

[Codepen](https://codepen.io/team/flowplayer/pen/MMMOKm)