tjenkinson/media-element-syncer

Synchronise two or more HTML5 media elements.

Media Element Syncer

Synchronise two or more HTML5 media elements. Similar to the unimplemented MediaController api.

How?

This works by continuously adjusing the playbackRate of the media elements, or performing a seek operation if the difference is too big.

Installation

npm install --save media-element-syncer

Usage

All media elements passed to addChild will remain synchronised with the source element.

MediaElementSyncer is eligible for garbage collection when there are no children.

import { MediaElementSyncer } from 'media-element-syncer';

const source = document.getElementById('source');
const destination1 = document.getElementById('destination1');
const destination2 = document.getElementById('destination2');
const syncer = new MediaElementSyncer(source);
syncer.addChild(destination1);
syncer.addChild(destination2, { offset: -1000 });

// syncer.removeChild(destination1);

Configuration

The optional second param to MediaElementSyncer takes an object which has the following optional properties:

• refreshInterval: how often to resync the elements. (default: 200ms)
• correctionTime: how many milliseconds into the future to aim for being in sync. (default: 500ms)
• seekThreshold: if the time is out by more than this amount, a seek will be performed instead of adjusting the playbackRate. (default: 1000ms)

Demo

The code for the demo is here and there is a hosted version here.

media-element-syncer's Issues

Audio off-sync with video on mobile

The audio and video is synced with each other perfectly in desktop, but kinda off in mobile. Maybe it is performance problem? Because my phone is old, Haven't tried in newer phone yet.

playbackRate computation for slowdown seems to be wrong

I think the playbackRate computation is wrong when the media element needs to slow down. It's at least not symmetric when compared to the speed up but maybe that's intentional.

Let's imagine the media element has a currentTime of 8.8 but it should be at the targetTime of 8.2. The diff computed as targetTime - currentTime is then -0.6. That means the following code ...

media-element-syncer/src/media-element-syncer.js

Lines 78 to 82 in 9b53aa0

	const rate = Math.max(
	0,
	((diff + this._correctionTime) / this._correctionTime) *
	sourcePlaybackRate
	);

... evaluates like this:

const rate = Math.max(0, ((-0,6 + 0,5) / 0,5) * sourcePlaybackRate);
const rate = Math.max(0, -0,2 * sourcePlaybackRate);
const rate = 0;

I guess when the media element has to slow down it should instead be something like the following:

const rate = sourcePlaybackRate / ((Math.abs(-0,6) + 0,5) / 0,5);
const rate = sourcePlaybackRate / 2.2;

What about changing the rate computation to something like this?

const rate = diff > 0
    ? ((diff + this._correctionTime) / this._correctionTime) * sourcePlaybackRate
    : sourcePlaybackRate / ((this._correctionTime - diff) / this._correctionTime);

External clock

Hi,
i am working on a solution to sync multiple video across different devices.
I am playing with ircam-ismm/sync repo (esbuild-ed to run in a webpage)
that gives a simple yet efficient way to get a common clock on each client.

Now, a suggestion to your library would be to allow an external clock, I.E. by provinding a sourceTime callaback provider instead of a source video element. That wouldn't change the logic much but it woule allow to feed the target time with other data source than an actual running player.

I'll try to implement that on top of your code and if it fits the needs, i'll submit a PR later if you feels it's a good idea.

Best,
Thomas

doesn't work in safari

It doesn't work properly in safari because changing the playback rate there causes a stutter.