Elm Media Control - API Proposal

Fair! I guess a naive implementation would rely on browsers synchronising calls to different videos in the same execution to happen at the same time (probably wishful thinking :stuck_out_tongue:).

The more you know :smile:

This is just my immediate POV after a decade and a half of synchronization headaches across many domains. This whole API would be much easier if we could feed our own timecode to the media objects, but we can’t.

Yeah, I’ve been playing with it and I’m having extreme difficulty in maintaining perfect sync. It’s always half a frame off, and the difference is visible, in a way it’s not with the canvas technique.

EDIT: There’s one more thing to try that may work well, give me an hour or so…

Didn’t event take me that long. Yeah, don’t know why I didn’t think of this sooner. This doesn’t result in frame-perfect sync, but it does provide an easy way to synchronize:

There’s an old api in the Media API called Controller, specifically designed to let you control multiple videos in sync. The following works:

const myController = new Controller();
video.controller = myController;
videoDuplicate.controller = myController;

function play(){

function pause(){

function seek(time){
     controller.currentTime = time;

However, not every attribute works like this. Volume, muted, playbackRate, currentTime are all shared, but loop, src, textTracks, autoplay and others are individual. However, the ones that can be set on controller are the ones concerned with synchronization. Others, like loop, can simply be iterated through safely on each element.

EDIT: I’m really upset at myself for not thinking of this sooner. This is an obscure api, but fascinating to me, and I’ve been looking to find a good use for it for years.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.