IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Video Player

/

Design

Play back and interact with digital video data from different media.

The video player allows both Hudl and the user to clearly view and interact with our most important piece of data–video.

Architecture

The video player is made up of many parts to allow flexibility for the purpose it's fulfilling. That purpose could be strictly to allow coaches to draw over video or to simply watch the latest game.

IconPlay
0:00 / 0:00
IconAudioOff
IconEnterFullscreen

Video Player: The entire video player is comprised of the Video, Container, Row and Time components.

Controls

The video player controls are made up mostly of media playback icons. However, over time we've added new features and effects to enhance video for our users.

Usage

Playback Controls

The playback controls are the most important way to manipulate video in the way the user chooses. We should never put them in an unexpected place.

Don't  replace the positioning for standard playback controls.

Don't replace the positioning for standard playback controls.

Do make new functions accessible from the control bar.

Domake new functions accessible from the control bar.

Functions

We do more than just play back video. When features or functions become available, or are removed, make them appear predictably, without overwhelming our users with everything at once.

Don't display controls that are unvailable in the user's context.

Don'tdisplay controls that are unvailable in the user's context.

Do provide the appropriate controls for the audience.

Doprovide the appropriate controls for the audience.

Don't overwhelm the interface by displaiyng all possible functions at once.

Don'toverwhelm the interface by displaiyng all possible functions at once.

Do progressively disclose like functions together.

Doprogressively disclose like functions together.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.