Reel ArchiveThe easy way to put a film on a web page is to paste in an embed code from somewhere else. We did not do that. Every film here plays inside a player we wrote, on our own page, with nothing redirecting anywhere.
Underneath it is a plain HTML5 <video> element with the browser controls deliberately switched off. Everything you see — the play button, the clock, the scrub bar, the volume slider, fullscreen — is jQuery talking to the HTML5 media API.
The interesting parts were the ones nobody notices. The timeupdate event fires several times a second, so the clock has to update without fighting you while you are dragging the scrub bar. The film’s duration is unknown until metadata loads, so the slider cannot be sized until then. Fullscreen has to apply to the wrapper rather than the video, or the controls disappear with it.
It would have been faster to use somebody else’s player. We would also have learned nothing, and we would not be able to explain a single line of it.