Stay organized with collections
Save and categorize content based on your preferences.
The playback view is displayed when media has been selected.
Included in this view are:
Back button
Media metadata and elapsed time
Queue button
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.
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 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.
The expanded media controls provide 4 custom actions in addition to the primary actions
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eThe playback view displays media metadata, elapsed time, and playback controls, including a back button and queue button.\u003c/p\u003e\n"],["\u003cp\u003ePrimary media controls include actions like Play/Pause, Previous, and Next, with an overflow button for apps with more than 5 actions.\u003c/p\u003e\n"],["\u003cp\u003eAction buttons are positioned in a specific order: Playlist/Queue, Previous, Play/Pause, Next, and an optional function.\u003c/p\u003e\n"],["\u003cp\u003eSecondary actions, such as thumbs up/down, can be accessed via the overflow button and are limited to 4 custom actions.\u003c/p\u003e\n"]]],[],null,["# Playback view\n\n\u003cbr /\u003e\n\nThe playback view is displayed when media has been selected.\n\nIncluded in this view are:\n\n1. Back button\n2. Media metadata and elapsed time\n3. Queue button\n4. Playback controls with visual progress indicator\n\nWhen there are more than 5 actions in the playback controls, apps can provide secondary actions via the overflow button.\nThe playback view shows media metadata (art, title, optional subtitle, and explicit-content indicator) and provides playback controls\n\n*** ** * ** ***\n\nPrimary actions\n---------------\n\nAll 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.\n\nApps with more than 5 actions should provide access to secondary actions by making the far right button an overflow button.\nPrimary action controls with more than 5 actions\n\n### Action button locations\n\nTo 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.\n\nIf your service doesn't use Previous or Next buttons, you can put other buttons in their positions.\n\n| Position | Button |\n|-----------------|-------------------|\n| Far Left | Playlist/Queue |\n| Left of center | Previous |\n| Center | Play/Pause |\n| Right of center | Next |\n| Far right | Optional function |\n\n*** ** * ** ***\n\nSecondary actions\n-----------------\n\nApps 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.\nThe expanded media controls provide 4 custom actions in addition to the primary actions"]]
