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.