There will be a hover style for the CC button that will override any other styling that might be on the CC button.
When the user clicks on the CC button
The menu will hide when any one of the following happens:
The currently selected item in the menu will have its own style. The menu items will have a hover style different than the 'currently selected' style.
The styling of the CC button will change to reflect whether or not a caption is currently selected. The "captions are on" style is different than the "menu is currently showing" style.
Single-clicking the video player container play/pauses the video
Double-clicking the video player container full-screens the video
1. Video player container
2. Play/pause button
3. Volume button
4. Scrubber
5. Closed captioning button
6. Transcript button
7. Full-screen button
If transcript is active:
8. Transcript language drop-down
9. Download transcript button
10. Close transcript button
11. Transcript area
- On stop/pause, enter/space plays the video
- On play, enter/space pauses the video
- up/down arrows controls volume
- right/left arrows controls scrubbing
- esc ?
- enter/space alternates between play and pause
- up/down arrows do nothing
- right/left arrows do nothing
- esc ?
- On focus, volume slider appears (focus is on the combined button + slider piece)
- enter/space alternates between muting and unmuting the audio
- up/down arrows increase/decrease the volume
- right/left arrows do nothing
- esc ?
- enter/space do nothing
- up/down arrows do nothing
- right/left arrows scrub
- esc ?
- On focus, CC/Transcript menu does not appear automatically
- enter/space on button opens/closes CC/Transcript menu
- up arrow on button opens CC/Transcript menu and places focus on first item (at bottom)
- up/down arrows cycles through menu elements (down arrow does NOT close menu)
- enter/space on menu item activates the element and closes the menu; if the element is already active, keep element active and close the menu
- right/left arrows do nothing
- esc ?
- enter/space alternates between full screen and windows
- up/down arrows do nothing
- right/left arrows do nothing
- esc ?
1. If a menu is open, close it (i.e., transcript/closed captioning menu).
2. If in full-screen, return to windowed mode. Retain last focus.
3. If UI is open, return to container state.
* in particular, no special interaction for esc with the Volume button
- On initial focus of transcript area, focus on highlighted phrase (if playing) or first phrase (if never played)
- arrow keys navigates thru the phrases while changing focusing appropriately; viewport follows focus of phrase, not highlight; once focus is lost (i.e., tab out of the transcript area), viewport follows highlight on next update (i.e., if video is paused, and focus is lost, no change of viewport occurs)
- enter/space activates phrase (i.e., scrubs to that phrase); if the phrase is already highlighted, video is scrubbed to the beginning of the phrase
- esc?
There will be a focus style for the CC button that will be different than the hover style.
Tabbing to the CC button will focus it but not show the menu. Enter or space will show the menu.
Once the menu is showing, arrow keys will move 'focus' within the menu items. This action alone will NOT actually 'activate' an item in the menu.
Items selected with the arrow keys will be styled differently than the currently active selection. James is still deciding whether or not this style will be different than the hover style.
While the menu is showing, enter or space will hide the menu. If the arrow keys had been used to change the selection, the new selection will be activated with the enter or space.
If the user has used the arrow keys to select something but NOT yet pressed enter or space, tabbing away from the CC button will hide the menu WITHOUT activating the selected menu item.