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.
; const source = document;const destination1 = document;const destination2 = document;const syncer = source;syncer;syncer; // 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 theplaybackRate
. (default: 1000ms)
Demo
The code for the demo is here and there is a hosted version here.