Media Players
Last updated: September 11, 2015 at 19:30 pm

Media players allow users to control video, audio or other rich media on your site.

Visual example of the element:

What problem does this element or pattern solve?
Although it is a complex interaction, media players are listed as a basic interaction because of the unique nature of the content type displayed within them. Due to the popularity of YouTube, users have come to expect common behaviors and iconography for certain controls, however there is still a great deal of flexibility when it comes to visual styling.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Will you have separate players for video and audio content?
  • Will the content within your media player begin playing automatically, or will the user be required to touch a “play” button.
  • Carefully define the positioning, visual styling, and behavior of all controls.
  • Will your videos play in the main content area, or launch within a modal?
  • Will the player display a static image until the play control is clicked? Or will the non-playing screen be a simple, solid color?
  • Will you permit users to control the volume within the player itself, or will you rely upon their current system settings? Will you include a mute button?
  • What aspect ratios will your video player support? If you play a video with a different aspect ratio, what is the color of the container background?

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
audio player, video player, stream, a/v controls, embedded audio, embedded video, embedded player
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply