Skip to main contenteBay Playbook

Video player

v2.0

The video player is used for displaying and controlling video content.

  • Skin
  • Marko
  • React
Stylized artwork of a video player.

Guidelines

Our accessibility section covers only the key considerations that impact design thinking at a page level, such as keyboard interaction, heading structure and landmarks. For exhaustive pattern level details & guidance for the web, please visit eBay MIND Patterns.

Keyboard interaction

The video player can be in an initial thumbnail state or a play/pause state.

Tab sequence - initial thumbnail state

  1. Play Button (starts video and enters play/pause state)
A group of toggle buttons in states of rest, selection and focus.

Tab sequence - play/pause state

  1. "Play" / "Pause", button
  2. "Seek", range slider
  3. controlled with arrow keys
  4. "Closed captions", toggle button
  5. "Volume", range slider
  6. appears on focus, hover, or long press
  7. controlled with arrow keys
  8. "Mute" / "Unmute", button
  9. "Report", button
  10. "Fullscreen", button
  11. Escape key to exit fullscreen view
  12. "More options", menu button
  13. Enter/Space to open menu, arrow keys to navigate options
A group of toggle buttons in states of rest, selection and focus.