Media Player

An audio and video player for Framer, as one component with a switch rather than two.

Play and pause, a draggable scrub track with the buffered range drawn behind the played range, a current time and duration readout, skip buttons, volume and mute. Poster art and a title line are optional.

The scrub track takes its pointer capture on itself and never on a parent, so the transport buttons beside it stay alive to a real mouse and a real finger. That is not a detail: a capture taken one level up retargets the press away from every button inside it, and a scripted click still works, so the failure hides from testing.

Duration is NaN until metadata loads and Infinity on a live stream. Both read as something a human can parse rather than as a broken clock. In the Framer canvas, where no media ever loads, the component draws a believable preview state from two controls: a duration and a position, with the clock, the played bar and the buffered bar all agreeing.

The scrubber is a real slider: arrow keys, Home and End, with the value and a spoken label. Element ids come from useId, so two players on one page never collide.

Every colour is a control, along with the bar height, the corner radius, the inset and the font.

After purchase you receive the component URL. In Framer, select a frame and paste it (Ctrl+V or Cmd+V).

Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev