Show HN: Self-made web media player without <video> or <audio>

8 pointsposted 18 hours ago
by vanilagy
(mediabunny.dev)

6 Comments

stagas

17 hours ago

Mediabunny is pretty cool! I'm actually using it in the other Show HN, VinylSpin.video to generate mp4 videos from the canvas animation so that no frames are dropped, unlike the MediaRecorder API. The output is perfect. Didn't know it could also play videos! That's awesome really.

vanilagy

17 hours ago

Awesome! Mediabunny started life for exactly this purpose. I wanted to build a replay renderer for my game Marble Blast Web that was as fast as the hardware allowed while giving a frame-perfect result. MediaRecorder just didn't cut it!

stagas

17 hours ago

Impressive. I'm glad you took that challenge and did it! The other option was vendoring ffmpeg wasm which is a few mbs. This is just a few kbs, doesn't require npm, I simply used the release .mjs file, the AI picked up its API right away and did everything for me. Perfect.

vanilagy

17 hours ago

Lovely! (not to mention ffmpeg.wasm is like 50x slower lol)

fragmede

17 hours ago

I'm out of the loop. why's the video or audio tag not desirable?

vanilagy

17 hours ago

Great question! <video> and <audio> are perfectly apt for simple media playing on the web, and you should use them for playing files.

They tend to break down when you want to build more complex applications on top of them (such as a video editor) that require perfect-accuracy seeking and playback, precise control over decoding patterns, and direct access to frame data. Mediabunny was built to power that kind of application, and so this demo acts as a proof of concept that you can reimplement the <video> element from scratch using that library.