5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T697,

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, press Insert, choose Add Component URL, and paste it.

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

5a:[["$","$L5d",null,{"post":{"id":"01a0c4ec-b3d2-72aa-8814-4d2b418c00a6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2a3b7013-68f9-4044-aeeb-2e017c0907e5","name":"Majed Monem","slug":"majed-monem","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/rz7b98pc","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rruW26oG8PoGue3JMnuV","resolved":true,"title":"Media Player","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"An audio and video player for Framer, as one component with a switch rather than two."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Every colour is a control, along with the bar height, the corner radius, the inset and the font."}]},{"type":"paragraph","content":[{"type":"text","text":"After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it."}]},{"type":"paragraph","content":[{"type":"text","text":"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"}]}]},"introduction":"Audio and video, one bar","slug":"media-player","author":{"framerUserId":"2a3b7013-68f9-4044-aeeb-2e017c0907e5","name":"Majed Monem","slug":"majed-monem","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/rz7b98pc","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/01a0c4eb-778c-717f-9870-d53fce85d9e2.jpg","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-21T17:04:01.344Z","updatedAt":"2026-09-21T17:04:01.344Z","publishedAt":"2026-09-21T17:04:01.342Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://safe-book-192450.framer.app/media-player","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_wlK9G9XWGrpwjtrTRKvYmNfzG6AYsYssNVcfa3PA6Ze","workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"pbqVnRewubGohe7Lbt9W","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-21T17:04:02.002Z","updatedAt":"2026-09-21T17:04:02.002Z","reported":false}}],"$L5f"]

Suggested for you