The player component lets users navigate and interact with different media, such as video or audio files.

This guide contains
  • Usage
  • Examples
  • Download


Video Player

The video player provides an interface that allows users to interact with videos. Users are able to play and pause videos, increase or decrease the volume, as well as enable options like quality or subtitles, fullscreen, and seek.

Video player in landscape format, currently playing.

Video player in rectangular format, paused state.

Video player in portrait format with volume control as popover.

Video player in portrait format in inital state.

Video player in inital state with an information overlay on yellow highlight gradient.

Video player in inital state with an information overlay on darkened still.

Audio Player

Two different audio layers can be used for audio files. One comes with a simple progress bar and the other one with a sound wave visualization. Both offer the same functions, such as pause, play, or seek.

Simple audio player with secondary buttons as main control.

Simple audio player with primary buttons as main control.

Audio player with sound wave visualization.



If you download any document, you accept our Terms and Conditions.

Sketch UI Library
85.98 MB