Media Patterns

Playback transport controls with start, rewind, play, fast forward, and end buttons in a flat button group. Use as the core navigation component in media players, simulation reviewers, or timeline-based interfaces.

Playback speed control using a rounded button group with preset speed options for audio and video playback. Use when toolbar space allows discrete speed buttons and users need to see all options at once.

Compact playback speed control using a flat select dropdown for audio and video playback. Use when toolbar space is tight and a dropdown works better than a button group for speed selection.

Volume control with mute toggle and range slider for audio playback. Use in media players, video reviewers, or any interface where users need fine-grained audio level control.

Zoom level control with zoom-out, range slider, and zoom-in buttons for video and canvas content. Use in media viewers, map interfaces, or image editors where users need precise zoom control.

Time scrubber with current position, range slider, and total duration for audio and video playback. Use in media players where users need to seek to a specific timestamp or scan through recorded content.

Standard video player with playback controls, timeline scrubber, and volume controls. Use for reviewing recorded sensor data, simulation playback, or training video content.

Compact audio player controls with playback controls, and timestamp display. Ideal for reviewing audio logs, voice commands, or alert sounds.

Full-page video player layout with metadata panel and playback controls. Use for reviewing recordings that requires detailed contextual information.