Playback view

The playback view is displayed when media has been selected.

Included in this view are:

  1. Back button
  2. Media metadata and elapsed time
  3. Queue button
  4. Playback controls with visual progress indicator

When there are more than 5 actions in the playback controls, apps can provide secondary actions via the overflow button.

Screenshot of playback view with callouts identifying specific elements
The playback view shows media metadata (art, title, optional subtitle, and explicit-content indicator) and provides playback controls

Primary actions

All media apps display typical media controls – such as Play/Pause, Previous, and Next – in an easily targeted action card that can include up to 9 actions.

Apps with more than 5 actions should provide access to secondary actions by making the far right button an overflow button.

Primary action controls
Primary action controls with more than 5 actions

Action button locations

To ensure consistent usage across media services, actions must appear in the following order (from left to right) on the primary media controls: Playlist/Queue, Previous, Play/Pause, and Next, with an optional function in the rightmost position.

If your service doesn’t use Previous or Next buttons, you can put other buttons in their positions.

Position Button
Far Left Playlist/Queue
Left of center Previous
Center Play/Pause
Right of center Next
Far right Optional function

Secondary actions

Apps can provide up to 4 secondary custom actions, such as thumbs up/down. The secondary actions slide up from the primary actions when a user selects the overflow button.

Secondary action controls
The expanded media controls provide 4 custom actions in addition to the primary actions